layui：弹出层弹出html页面的方式

2024-04-11 13:02| 来源: 网络整理| 查看: 265

layui弹出层的详细页面，除了在文档中有一些示例以外，更多的可以阅读独立网站：http://layer.layui.com/。

下面以点击按钮1弹出一个表单填写页面为例：

layui.use(['element','jquery','layer'], function(){ var $ = layui.jquery; var element = layui.element; var layer = layui.layer; //alert $("#btn1").click(function(){ //input here layer.open({ type: 2, title: '请填写表单', shadeClose: true, shade: 0.8, area: ['580px', '90%'], shadeClose: false, content: 'Demo3-6.html' //iframe的url }); //input above }); });

使用之前，先引入layer框架。首先监听btn1的按钮事件，点击时，open一个窗口，area为弹出窗口的大小，content为需要弹出的html页面的url。shadeClose为trues时，点击非弹出框的其他地方，弹出框消失。

完整例程

layout 后台大布局 - Layui .layer-photos-demo{margin:10px 0;} .layer-photos-demo img{width: 160px; height: 100px;} 一个按钮一个按钮一个按钮 //JavaScript代码区域 layui.use(['element','jquery','layer'], function(){ var $ = layui.jquery; var element = layui.element; var layer = layui.layer; //alert $("#btn1").click(function(){ //input here layer.open({ type: 2, title: '请填写表单', shadeClose: true, shade: 0.8, area: ['580px', '90%'], shadeClose: false, content: 'Demo3-6.html' //iframe的url }); //input above }); });

【本文地址】

公司简介

联系我们