这篇博客展示了如何使用layui加载layer弹层插件，并提供了多窗口模式和层叠置顶的示例代码，包括触发事件、设置内容和操作按钮。读者可以前往layer官网获取更多详细信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<blockquote class="layui-elem-quote">
大部分演示都在layer独立组件的官网，与内置的layer模块，用法是完全一致的
</blockquote>
<a class="layui-btn layui-btn-normal" href="http://layer.layui.com/" target="_blank">前去layer官网</a>
<fieldset class="layui-elem-field layui-field-title site-demo-button" style="margin-top: 30px;">
<legend>特殊例子</legend>
</fieldset>
<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
<blockquote class="layui-elem-quote layui-quote-nm">
Tips：为了更清晰演示，每触发下述一个例子之前，都会关闭所有已经演示的层
</blockquote>
<button data-method="setTop" class="layui-btn">多窗口模式，层叠置顶</button>
</div>
<!-- 示例-970 -->
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>再次温馨提醒</legend>
</fieldset>
<p class="site-demo-text">本页演示是采用了Layui加载的layer，如果你使用的是独立版的layer，无需通过layui.use('layer')来加载。Layui中的layer与独立版的layer的唯一不同，就是加载方式这一点有所差异，请阅读文档：
<a href="http://www.layui.com/doc/modules/layer.html#use" target="_blank">http://www.layui.com/doc/modules/layer.html#use</a>
</p>
<script src="./layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('layer', function () { //独立版的layer无需执行这一句
var $ = layui.jquery,
layer = layui.layer; //独立版的layer无需执行这一句
//触发事件
var active = {
setTop: function () {
var that = this;
//多窗口模式，层叠置顶
layer.open({
type: 1 //此处以iframe举例
,
title: '当你选择该窗体时，即会在最顶端',
area: ['390px', '260px'],
shade: 0,
maxmin: true,
offset: [ //为了演示，随机坐标
Math.random() * ($(window).height() - 300), Math.random() * ($(
window).width() - 390)
],
content: 'http://layer.layui.com/test/settop.html',
btn: ['继续弹出', '全部关闭'] //只是为了演示
,
yes: function () {
var index = layer.open({
type: 1 //此处以iframe举例
,
title: '当你选择该窗体时，即会在最顶端',
area: ['390px', '260px'],
shade: 0,
maxmin: true,
offset: [ //为了演示，随机坐标
Math.random() * ($(window).height() - 300),
Math.random() * ($(window).width() - 390)
],
content: 'http://layer.layui.com/test/settop.html',
btn: ['确定', '取消'], //只是为了演示
yes: function () {
alert('ajax');
layer.closeAll();
},
btn2: function () {
alert(index);
layer.close(index);
},
zIndex: layer.zIndex //重点1
,
success: function (layero) {
layer.setTop(layero); //重点2
}
})
},
btn2: function () {
var index1 = layer.open({
type: 1 //此处以iframe举例
,
title: '当你选择该窗体时，即会在最顶端',
area: ['390px', '260px'],
shade: 0,
maxmin: true,
offset: [ //为了演示，随机坐标
Math.random() * ($(window).height() - 300),
Math.random() * ($(window).width() - 390)
],
content: '关闭？',
btn: ['确定', '取消'], //只是为了演示
yes: function () {
alert('ajax');
layer.closeAll();
},
btn2: function () {
alert(index1);
layer.close(index1);
},
zIndex: layer.zIndex //重点1
,
success: function (layero) {
layer.setTop(layero); //重点2
}
})
return false
}
});
},
};
$('.layui-btn').on('click', function () {
var othis = $(this),
method = othis.data('method');
active[method] ? active[method].call(this, othis) : '';
});
});
</script>
</body>
</html>
扫一扫
590
到【灌水乐园】发言
