当前位置：首页 - 正文

layui弹出层怎么不显示

发布网友发布时间：2022-04-23 06:11

我来回答

共3个回答

懂视网时间：2022-04-29 14:16

【注意事项】

一、使用时，请把文件夹layer整个放置在您站点的任何一个目录，只需引入layer.js即可，除jQuery外，其它文件无需再引入。

二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您可以通过layer.config()来配置（详见官网API页）

三、jquery需1.8+

下载layer后，把它部署到你项目中的任何一个目录（当然，我们推荐放在前端相关目录里），你不能去挪动layer里面的文件结构，因为它们是不可拆散的组合。就像这样：(特别说明：需要把整个layer文件夹引入你的文件中，而不是单单引入layer.js文件)

你不必去管那些文件是干嘛的，你只需要认准一个文件：layer.js 没错，当你试图在页面呈现layer的时候，你应该这样去做：（最简单的示例）

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" type="text/css" href="css/layer.css"/>
 <style type="text/css">
  .btn{
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: magenta;
  text-align: center;
  font-size: 15px;
  }
 </style>
 </head>
 <body>
 <div class="btn">点我</div>
 <!--你必须先引入jQuery1.8或以上版本-->
 <script src="js/jquery-2.1.0.js"></script>
 <script src="js/layer/layer.js"></script>
 <script>
  $(".btn").bind("click",function(){
  layer.msg('点我的人最美！');
  });
 </script>
 </body>
</html>

$("#btn").bind("click",function(){
 //layer.msg('点我的人最美！');
 layer.msg('此商品不存在或者已下架，看看其他商品吧！', {
 time: 3000
 });
});

更多示例：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" type="text/css" href="css/layer.css"/>
 <style type="text/css">
  .btn:nth-child(odd){
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: magenta;
  text-align: center;
  font-size: 15px;
  }
  .btn:nth-child(even){
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: aqua;
  text-align: center;
  font-size: 15px;
  }
  #test5{
  text-align: center;
  width: 500px;
  margin-left: 500px;
  }
 </style>
 </head>
 <body>
 <div class="btn" id="btn">点我.btn</div>
 <div class="btn" id="test2">点我test2</div>
 <div class="btn" id="parentIframe">点我parentIframe</div>
 <div class="btn" id="test4">点我test4</div>
 <div class="btn" id="test5">点我test5</div>
 <!--你必须先引入jQuery1.8或以上版本-->
 <script src="js/jquery-2.1.0.js"></script>
 <script src="js/layer/layer.js"></script>
 <script>
 $(function(){
  $("#btn").bind("click",function(){
  layer.msg('点我的人最美！');
  });
  
  //弹出一个页面层
  $('#test2').on('click', function(){
  layer.open({
  type: 1,
  area: ['600px', '360px'],
  shadeClose: true, //点击遮罩关闭
  content: '<div style="padding:20px;">自定义内容--添加自己需要的描述内容</div>'
  });
  });
  
  //弹出一个iframe层
  $('#parentIframe').on('click', function(){
  layer.open({
  type: 2,
  title: 'iframe父子操作',
  maxmin: true,
  shadeClose: true, //点击遮罩关闭层
  area : ['800px' , '520px'],
  content: 'parentIframe.html'
  });
  });

  //弹出一个loading层
  $('#test4').on('click', function(){
  var ii = layer.load();
  //此处用setTimeout演示ajax的回调
  setTimeout(function(){
  layer.close(ii);
  }, 1000);
  });
  
  //弹出一个tips层
  $('#test5').on('click', function(){
  layer.tips('Hello tips!', '#test5');
  });
  
 });
 </script>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" type="text/css" href="css/layer.css"/>
 <style type="text/css">
  .btn:nth-child(odd){
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: magenta;
  text-align: center;
  font-size: 15px;
  }
  .btn:nth-child(even){
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: aqua;
  text-align: center;
  font-size: 15px;
  }
  #test5{
  text-align: center;
  width: 100px;
  margin-left: 100px;
  }
 </style>
 </head>
 <body>
 <div class="btn" id="btn">点我.btn</div>
 <div class="btn" id="test2">点我test2</div>
 <div class="btn" id="parentIframe">点我parentIframe</div>
 <div class="btn" id="test4">点我test4</div>
 <div class="btn" id="test5">点我test5</div>
 
 <div class="btn" id="test6">点我test6</div>
 <div class="btn" id="test7">点我test7</div>
 <div class="btn" id="test8">点我test8</div>
 <div class="btn" id="test9">点我test9</div>
 
 <!--你必须先引入jQuery1.8或以上版本-->
 <script src="js/jquery-2.1.0.js"></script>
 <script src="js/layer/layer.js"></script>
 <script>
 $(function(){
  $("#btn").bind("click",function(){
  layer.msg('点我的人最美！');
  });
  
  //弹出一个页面层
  $('#test2').on('click', function(){
  layer.open({
  type: 1,
  area: ['600px', '360px'],
  shadeClose: true, //点击遮罩关闭
  content: '<div style="padding:20px;">自定义内容--添加自己需要的描述内容</div>'
  });
  });
  
  //弹出一个iframe层
  $('#parentIframe').on('click', function(){
  layer.open({
  type: 2,
  title: 'iframe父子操作',
  maxmin: true,
  shadeClose: true, //点击遮罩关闭层
  area : ['800px' , '520px'],
  content: 'parentIframe.html'
  });
  });

  //弹出一个loading层
  $('#test4').on('click', function(){
  var ii = layer.load();
  //此处用setTimeout演示ajax的回调
  setTimeout(function(){
   layer.close(ii);
  }, 1000);
  });
  
  //弹出一个tips层
  $('#test5').on('click', function(){
  layer.tips('Hello tips!', '#test5');
  });
  
  //======================================
  //多窗口模式，层叠置顶
  $('#test6').on('click', function(){
  layer.open({
   type: 2 //此处以iframe举例
   ,title: '当你选择该窗体时，即会在最顶端'
   ,area: ['390px', '330px']
   ,shade: 0
   ,offset: [ //为了演示，随机坐标
   Math.random()*($(window).height()-300)
   ,Math.random()*($(window).width()-390)
   ]
   ,maxmin: true
   ,content: 'settop.html'
   ,btn: ['继续弹出', '全部关闭'] //只是为了演示
   ,yes: function(){
   $(that).click(); //此处只是为了演示，实际使用可以剔除
   }
   ,btn2: function(){
   layer.closeAll();
   }
   
   ,zIndex: layer.zIndex //重点1
   ,success: function(layero){
   layer.setTop(layero); //重点2
   }
  });
  });
  
  
  
  //配置一个透明的询问框
  $('#test7').on('click', function(){
  layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
   time: 20000, //20s后自动关闭
   btn: ['明白了', '知道了', '哦']
  });
  });
  
  
  //示范一个公告层
  $('#test8').on('click', function(){
  layer.open({
   type: 1
   ,title: false //不显示标题栏
   ,closeBtn: false
   ,area: '300px;'
   ,shade: 0.8
   ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
   ,resize: false
   ,btn: ['火速围观', '残忍拒绝']
   ,btnAlign: 'c'
   ,moveType: 1 //拖拽模式，0或者1
   ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">内容<br>内容</div>'
   ,success: function(layero){
   var btn = layero.find('.layui-layer-btn');
   btn.find('.layui-layer-btn0').attr({
   href: 'http://www.layui.com/'
   ,target: '_blank'
   });
   }
  });
  });
  
  //边缘弹出
  $('#test9').on('click', function(){
  layer.open({
   type: 1
   ,offset: 'c' //具体配置参考：offset参数项(t、r、b、l、c)
   ,content: '<div style="padding: 20px 80px;">内容</div>'
   ,btn: '关闭全部'
   ,btnAlign: 'c' //按钮居中
   ,shade: 0 //不显示遮罩
   ,yes: function(){
   layer.closeAll();
   }
  });
  });


 });
 </script>
 </body>
</html>

更多layui知识请关注layui使用教程栏目。

热心网友时间：2022-04-29 11:24

在使用layer的过程中，明明引入了文件，但是却说 i is not define

这是因为layer是用jquery进行封装的，如果不把jquery的引如文件放入layer.js前面就会出现这种错误。

解决方法：将jquery的引入放到layer的前面，

建议将jquery最新引入，防止出错。
而在使用layui的时候，直接把layui.js 和layui.css直接复制到需要的地方是不会显示弹窗等效果的。
因为它是按照它本身的那个目录进行加载的，因此复制的时候直接整个文件夹复制，然后再根据复制后的目录情况进行引入
layui.js 和layui.css，就能够解决这个问题

热心网友时间：2022-04-29 12:42

type - 基本层类型类型：Number，默认：0 layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层） layer.closeAll(); //关闭所有层 layer.closeAll(‘dialog’); //关闭信息框 layer.closeAll(

layui使用弹出层关闭后弹层的内容又显示出来

1.layui的弹层插件 layer 使用当弹层的内容很多时，可以先在页面上写好，一般是写在body里面，不要放在其他的div里面，防止弹层受到影响，使用方法：这里放置弹窗内容 layui.use('layer',function(){ layer.open({ ...

解决layui-open关闭自身窗口的问题

1.2、关闭该弹窗，在articleUpdate.jsp的JS部分用以下两行代码它就把自己关闭了 //当你在iframe页面关闭自身时var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引parent.layer.close(index); //再执行关闭 layer.alert('提交成功', { skin: 'layui-layer-molv' ...

layui 子弹出框操作成功后, 刷新父弹出框的内容

方法一：在layer弹出层中调用父界面重新加载函数方法二：调用layer插件的end回调方法：end - 层销毁后触发的回调类型：Function，默认：null 无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。父窗口打开layer弹出框时，添加end回调相比较而言，第一种方案会更佳，因为在操作逻辑上，...

layui怎么获取子级弹出层

1、首先打开layui，点击编辑按钮，弹出编辑弹出层，并显示相应的编辑数据。2、其次执行子页面的函数，通过yes回调确认。2、其次提交到后台，即可获取子级弹出层。

layui弹出层(open)的属性介绍

类型：String/Array，默认：垂直水平居中 offset默认情况下不用设置。但如果你不想垂直水平居中,可以进行查询官网赋值 maxmin - 最大最小化。类型：Boolean，默认：false 该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可更多layui知识请关注layui使用教程栏目。

有没有哪位大哥会玩layui弹出层的啊,没用过layui,我现在需要实现enter键...

var index = layer.open({...});//弹出框 //enter 监听事件 document.onkeydown = function (e) {e = e||window.event;if ((e.keyCode || e.which) == 13) {layer.close(index) //关闭当前弹出框 }} 网页链接

layui前端框架表格如何进行屏幕适配

项目中需要弹出层效果，使用了layui前端框架，主要使用了里面的弹出层特效（可以移动）html代码要给这个标签绑定click方法 1 显示点击以后，显示这个页面 1 2 显示页面 3 js代码 function showMean() { layui.use(‘layer‘,function () { var $ = layui.jquery, layer = layui.layer;...

layui弹出层渲染表单,并在表单里面添加开关和密码输入框怎么做,贴上...

,form = layui.form;//layui 表单需要依赖form模块，并且弹出层动态加载，必须在success参数里重新渲染。//用带有lay-filter参数的容器包裹CheckBox表单，密码输入框和平时一样使用就行 layer.open({ title: '在线调试',content: '',success: function(layero, index){ form.render(null, 'test1...

layui弹出层自定义样式(layer.open)

在引入的layui文件中找到css目录，找到其下的layer文件夹，如图建立myskin文件，在这个文件夹下面建立自己的样式；举例：在用到的layer.open处继承自己写的css样式，如下

layui 怎么使用ajax提交表单

使用layer弹出框使用ajax方法：1.你可以自定义按钮，写在你的页面里面2.使用layer的按钮的话，按钮的回调函数的参数中有两个参数，一个是弹层的对象，一个是弹层的index，你可以使用这个弹层的对象读取弹层中的数据，比如layero.find('xxx').val()

layui弹出层不好使 layer iframe层弹出层 layui弹出层 layui关闭弹出层 layui弹出层回调 layui给弹出层传递数据 layui弹出层提交之后关闭 layui 弹出层表格 layui弹出层自定义按钮

声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:11247931@qq.com

焦点

layui弹出层怎么不显示

最新推荐

猜你喜欢

热门推荐