标签：head function put htm -- layer post close 功能
以前习惯了bootstrap的模态框，突然换了layui，想的用layui实现类似于bootstrap的模态框功能。
用到了layui的layer模块，例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./layui/css/layui.css"> <script type="text/javascript" src="./layui/layui.js"></script> <script type="text/javascript" src="../JS/jquery-1.8.3.js"></script> <script> function openModak(){ $("[name=‘testname‘]").val("xxxxxxxxxxxxxxx");//向模态框中赋值 layui.use([‘layer‘],function () { var layer = layui.layer,$=layui.$; layer.open({ type:1,//类型 area:[‘400px‘,‘300px‘],//定义宽和高 title:‘查看详细信息‘,//题目 shadeClose:false,//点击遮罩层关闭 content: $(‘#motaikunag‘)//打开的内容 }); }) } </script> </head> <body> <button type="button" onclick="openModak()">开启模态框</button> </body> </html> <!--模仿bootstrap的模态框--> <div id="motaikunag" style="display: none;"> <div class="layui-row"> <div class="layui-col-md9"> 你的内容 9/12 </div> <div class="layui-col-md3"> 你的内容 3/12 </div> </div> <div class="layui-row"> <div class="layui-col-md3"> 名字 </div> <div class="layui-col-md9"> <input type="text" name="testname" value=""> </div> </div> <br/> <input type="button" onclick="javascript:alert(‘点击按钮‘)" title="点我" value="点我"> </div>
结果:
type - 基本层类型:
类型：Number，默认：0
layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
content - 内容
类型：String/DOM/Array，默认：‘‘
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。譬如：
/!*
如果是页面层
*/
layer.open({
type: 1,
content: ‘传入任意的文本或html‘ //这里content是一个普通的String
});
layer.open({
type: 1,
content: $(‘#id‘) //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post(‘url‘, {}, function(str){
layer.open({
type: 1,
content: str //注意，如果str是object，那么需要字符拼接。
});
});
/!*
如果是iframe层
*/
layer.open({
type: 2,
content: ‘http://sentsin.com‘ //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: [‘http://sentsin.com‘, ‘no‘]
});
/!*
如果是用layer.open执行tips层
*/
layer.open({
type: 4,
content: [‘内容‘, ‘#id‘] //数组第二项即吸附元素选择器或者DOM
});
标签：head function put htm -- layer post close 功能
原文地址：https://www.cnblogs.com/qlqwjy/p/8975885.html
