layer 这个是一个web弹层组件,挺好用的...然后项目框架是SSM...


  layer.open主要是用来弹出来一个iframe弹窗,然后用来展示数据也行,用来修改也行,这次记录的主要是展示,展示我想要展示的数据,我需要的页面...

  1. layer.open({
  2. type: 1,
  3. title: '账户信息详情',
  4. shadeClose: true,
  5. shade: false,
  6. maxmin: true, //开启最大化最小化按钮
  7. area: ['893px', '600px'],
  8. content: xxxxxxxxx
  9. });

其他的不看,单看content,因为content的内容就是需要展示的内容

第一种方法,很简单,我想要看一个已经存在的页面,比如说百度,或者项目中某个页面 直接写地址

  1. layer.open({
  2. type: 2,
  3. title: '很多时候,我们想最大化看,比如像这个页面。',
  4. shadeClose: true,
  5. shade: false,
  6. maxmin: true, //开启最大化最小化按钮
  7. area: ['893px', '600px'],
  8. content: 'http://fly.layui.com/'
  9. });
  10.  
  11. -----------------------------------------------------------------------
  12.  
  13. layer.open({
  14. type: 2,
  15. title: '用户信息。',
  16. shadeClose: true,
  17. shade: false,
  18. maxmin: true, //开启最大化最小化按钮
  19. area: ['893px', '600px'],
  20. content: '/test/user/info' + uid
  21. });

后面的uid可能是你需要传递的某些参数之类的...具体的根据你controller来定

第二种方法,将需要的内容写到页面上,然后在使用的时候调用

jsp页面:

  1. <div id='info' style = "display : none">
  2. 我是内容
  3. </div>

然后在js里面调用

  1. layer.open({
  2. type: 1,
  3. title: '账户信息详情',
  4. shadeClose: true,
  5. shade: false,
  6. maxmin: true, //开启最大化最小化按钮
  7. area: ['893px', '600px'],
  8. content: $("#info").html()
  9. });

第三种方法,直接在js里面拼接...好凶残...

  1. var html = "<div class='wrapper' id='detailsinfo'>" +
  2. "<div class='detailsdiv'>" +
  3. "<p><label>帐号:</label>" + '测试帐号' +"</p>" +
  4. "</div></div>"
  5.  
  6. layer.open({
  7. type: 1,
  8. title: '账户信息详情',
  9. shadeClose: true,
  10. shade: false,
  11. maxmin: true, //开启最大化最小化按钮
  12. area: ['893px', '600px'],
  13. content: html
  14. });

layui layer 弹框的更多相关文章

  1. layui layer弹框中表格的显示

    场景描述:点击iframe里面的一个按钮,需要在父级弹出一个弹框表格. 问题描述:这个弹框的分页不能正常显示,如果把layer.open前面的parent去掉,就可以正常显示. 代码展示: paren ...

  2. layer弹框在实际项目中的一些应用

    官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,l ...

  3. layer弹框层学习笔记

    这里对layer的笔记只是大概记录一下其使用过程,以便后续使用时快速回顾,更详细使用及介绍参考官网实例.链接在本文末 一 .初步了解layer-弹层之美 layer是一款近年来备受青睐的web弹层组件 ...

  4. 鼠标滚轮图片放大缩小功能,使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

  5. layer弹框

    官网http://layer.layui.com/ /!*如果是页面层*/layer.open({ type: 1, content: '传入任意的文本或html' //这里content是一个普通的 ...

  6. layer 弹框不显示内容

    // layer的弹框不显示信息 可能是背景颜色和字体颜色冲突 改下字体颜色即可 layer.msg('<p style="color:black">用户名不能为空&l ...

  7. layer弹框的上面各个属性 -可配置

    <script type="text/javascript"> 12 //eg 13 layer.open({ 14 title:"标题信息提示", ...

  8. layui透明弹框

    效果: layui.use('layer', function () { var layer = layui.layer; var str = '<div>'; str += '<d ...

  9. layer弹框,弹出后自动关闭

    今天做项目,出现一个问题,需求是用ajax做文件上传功能,代码写好之后,测试发现问题. 弹出层出现以后我没有主动点击确定和关闭等操作,程序自动关闭了弹出层 一步一步排查,找到了错误,首先,先确认你页面 ...

随机推荐

  1. 笔记--js实现异步

    <script type="text/javascript"> var xhr=false; function createXhr() { var xhobj = fa ...

  2. C++四舍五入问题

    C++四舍五入问题: c++默认的流输出数值有效位是6,包括整数和小数,若数值超出6位,则第七位四舍五入到6位数 #include <iomanip> 输入输出库的一部分,声明了一些与提取 ...

  3. Oracle数据库基础(一)

    当今主流数据库有瑞典MySQL公司的MySQL数据库,微软的SqlServer数据库,IBM公司的DB2,Oracle公司的Oracle数据库以及美国Sybase的Sybaseshujuku .数据库 ...

  4. (转载) listview实现微信朋友圈嵌套

    listview实现微信朋友圈嵌套 标签: androidlistview 2016-01-06 00:05 572人阅读 评论(0) 收藏 举报  分类: android(8)  版权声明:本文为博 ...

  5. Kattis - Speed Limit

    Speed Limit Bill and Ted are taking a road trip. But the odometer in their car is broken, so they do ...

  6. 实验楼—Mysql—查找最爱学的课程

    转载:https://www.shiyanlou.com/challenges/2651 背景 从上节题目构建的课程数据库中提取每个用户最爱学的课程数据. 右边桌面是实验楼的服务器,服务器中的 MyS ...

  7. ElasticSearch启动报错,bootstrap checks failed

    修改elasticsearch.yml配置文件,允许外网访问. vim config/elasticsearch.yml# 增加 network.host: 0.0.0.0 启动失败,检查没有通过,报 ...

  8. vue 根据下拉框动态切换form的rule

    taskCategorySelect (val) { // 任务类别下拉选择 if ( val == 5 ) { this.cameraORgateway = false; // true不可以使用 ...

  9. python_for循环

    #for循环'''for i in range(0,10,2):age_oldboy = 56for i in range(3): guess_age = int(input("guess ...

  10. windows 64位上oracle 11g安装

    每次下载安装都记不住,所以我总结一下,站在前人的肩膀上 原文地址:http://jingyan.baidu.com/article/48b558e33af4a57f39c09a42.html Orac ...