layui 写一个模态框
时间: 2023-06-29 18:12:00 浏览: 68
好的,下面是一个简单的 layui 模态框示例:
HTML 代码:
```
<button class="layui-btn" id="openModal">打开模态框</button>
<div id="myModal" class="layui-modal">
<div class="layui-modal-dialog">
<div class="layui-modal-content">
<div class="layui-modal-header">
<h3>模态框标题</h3>
<button class="layui-icon layui-icon-close" id="closeModal"></button>
</div>
<div class="layui-modal-body">
<p>这里是模态框的内容</p>
</div>
<div class="layui-modal-footer">
<button class="layui-btn" id="confirmBtn">确认</button>
<button class="layui-btn layui-btn-primary" id="cancelBtn">取消</button>
</div>
</div>
</div>
</div>
```
JavaScript 代码:
```
layui.use('layer', function(){
var layer = layui.layer;
// 打开模态框
$('#openModal').on('click', function(){
layer.open({
type: 1,
title: '模态框标题',
content: $('#myModal'),
area: '500px',
btn: ['确认', '取消'],
yes: function(index, layero){
// 确认按钮回调函数
layer.close(index);
},
btn2: function(index, layero){
// 取消按钮回调函数
layer.close(index);
return false; // 阻止默认行为
},
end: function(){
// 模态框关闭后的回调函数
}
});
});
// 关闭模态框
$('#closeModal').on('click', function(){
layer.closeAll('page');
});
});
```
上述代码中,我们首先引入了 layui 的 layer 模块,并在打开模态框按钮的点击事件中调用了 layer.open() 方法打开模态框,该方法的参数有:
- type:模态框类型,这里为 1,表示内容是 DOM 元素;
- title:模态框标题;
- content:模态框内容,这里使用了 jQuery 的选择器选中了 HTML 中的模态框;
- area:模态框大小,这里为 500px;
- btn:模态框底部按钮,这里有两个按钮,分别是“确认”和“取消”;
- yes:确认按钮的回调函数,点击“确认”按钮时会调用;
- btn2:取消按钮的回调函数,点击“取消”按钮时会调用;
- end:模态框关闭后的回调函数。
最后,我们在取消按钮的回调函数中使用了 layer.closeAll() 方法关闭了模态框。