首页Layui页面级弹出框

Layui页面级弹出框

时间: 2023-08-16 11:03:38 浏览: 101

Layui提供了页面级弹出框的组件，可以在当前页面中打开一个新的弹出框页面。以下是一个使用Layui页面级弹出框的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui 页面级弹出框示例</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> </head> <body> <button class="layui-btn layui-btn-normal" id="openPopup">打开弹出框页面</button> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> <script> // 初始化Layui layui.use(['layer'], function() { var layer = layui.layer; // 监听按钮点击事件 document.getElementById('openPopup').addEventListener('click', function() { // 打开弹出框页面 layer.open({ type: 2, title: '弹出框页面示例', area: ['800px', '600px'], content: 'popup.html' // 弹出框页面的URL地址 }); }); }); </script> </body> </html> ``` 在上面的示例中，我们使用了Layui的`layer.open()`方法，并将`type`属性设置为2，以打开一个页面级弹出框。通过`area`属性可以设置弹出框的宽度和高度。在`content`属性中，我们指定了弹出框页面的URL地址（例如：`popup.html`），这个页面将在弹出框中显示。请注意，在示例中我们仅提供了一个按钮，点击按钮后将打开一个弹出框页面。你可以根据自己的需求修改按钮样式和弹出框页面的内容。希望对你有所帮助！如果还有其他问题，请继续提问。

阅读全文