Rumah >hujung hadapan web >Tutorial Layui >layui弹出层怎么使用

layui弹出层怎么使用

藏色散人
藏色散人asal
2021-01-13 09:39:094629semak imbas

layui弹出层的使用方法:首先引入jQuery1.8以上的任意版本;然后引入laery.js;最后通过“function show(){var a = layer.open({...});}”方式使用laery.open弹出层即可。

layui弹出层怎么使用

本教程操作环境:Windows7系统、layui2.4&&jquery2.2.1版,Dell G3电脑。

推荐:《layUI教程

layer 在 layui 体系中的位置比较特殊,甚至让很多人都误以为 layui = layer ui,所以再次强调 layer 只是作为 layui 的一个弹层模块

1、获取laery,你需要去官网下载laery.js 地址--http://layer.layui.com/

2、引入laery.js 在此之前你必须要先引入jQuery1.8以上的任意版本

<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="layer/layer.js"></script>

3、使用laery.open();

function show(){
  var a = layer.open({
    type: 2,
    area: [&#39;80%&#39;,&#39;450px&#39;],
    title: &#39;我是标题&#39;,
    shadeClose: true,
    content: [&#39;layer_model.html&#39;,&#39;no&#39;]
  });
}

基础参数

1. type 类型

type: 1,  // 0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)

2. title 标题

title:"我是标题",  
//若你还需要自定义标题区域样式,那么你可以title: [&#39;文本&#39;, &#39;font-size:18px;&#39;] 数组第二项可以写任意css样式;
//如果你不想显示标题栏,你可以 title: false

3. content 内容

3.1.如果是页面层

layer.open({
  type: 1, 
  content: &#39;传入任意的文本或html&#39; //这里content是一个普通的String
});
 
layer.open({
  type: 1,
  content: $(&#39;#id&#39;) //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
});
 
//Ajax获取
$.post(&#39;url&#39;, {}, function(str){
  layer.open({
    type: 1,
    content: str //注意,如果str是object,那么需要字符拼接。
  });
});

示例:

5e5986f4870d51f54008bf032bbb5da.png

3.2.如果是iframe层

layer.open({
  type: 2, 
  content: &#39;http://sentsin.com&#39; //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: [&#39;http://sentsin.com&#39;, &#39;no&#39;]
});

示例:

3994898e61aa94807c6b03d6b8a1c4e.png

3.3.如果是用layer.open执行tips层

layer.open({
  type: 4,
  content: [&#39;内容&#39;, &#39;#id&#39;] //数组第二项即吸附元素选择器或者DOM
});

示例:

0c1ffbe948b045187545f670599f3a1.png

4. area 宽高

在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: '500px',高度仍然是自适应的。当你宽高都要定义时,你可以 area: ['500px', '300px']

5. btn 按钮

信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。当您只想自定义一个按钮时,你可以btn: '我知道了',当你要定义两个按钮时,你可以btn: ['yes', 'no']。当然,你也可以定义更多按钮,比如:btn: ['按钮1', '按钮2', '按钮3', …],按钮1的回调是yes,而从按钮2开始,则回调为btn2: function(){},以此类推。如:

layer.open({
  content: &#39;test&#39;,
  btn: [&#39;按钮一&#39;, &#39;按钮二&#39;, &#39;按钮三&#39;],
  yes: function(index, layero){
    //按钮【按钮一】的回调
  },
  btn2: function(index, layero){
    //按钮【按钮二】的回调
    //return false 开启该代码可禁止点击该按钮关闭
  },
  btn3: function(index, layero){
    //按钮【按钮三】的回调
    //return false 开启该代码可禁止点击该按钮关闭
  },
  cancel: function(){ 
    //右上角关闭回调
    //return false 开启该代码可禁止点击该按钮关闭
  }
});

6, shade 遮罩

即弹层外区域。默认是0.3透明度的黑色背景('#000')如果你想定义别的颜色,可以shade: [0.8, '#393D49'];如果你不想显示遮罩,可以shade: 0

如果你的遮罩是存在的那么你还可以设置 shadeClose 是否点击遮罩关闭 默认:false 如果你的shade是存在的,那么你可以设定shadeClose来控制点击弹层外区域关闭

Atas ialah kandungan terperinci layui弹出层怎么使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:ie8 layui不兼容吗Artikel seterusnya:layui 怎么导入Excel