第一步:引用文件
第二步:写脚本
<script> //iframe窗 //layer.open({ // type: 2, // title: false, // closeBtn: 0, //不显示关闭按钮 // shade: [0], // area: ['340px', '215px'], // offset: 'rb', //右下角弹出 // time: 2000, //2秒后自动关闭 // anim: 2, // content: ['text1.html', 'no'], //iframe的url,no代表不显示滚动条 右下角页面 // end: function () { //此处用于演示 // layer.open({ // type: 2, // title: '很多时候,我们想最大化看,比如像这个页面。', // shadeClose: true, // shade: false, // maxmin: true, //开启最大化最小化按钮 // area: ['893px', '600px'], // content: 'text.html' //最大化页面 // }); // } //}); //初体验 //layer.alert('内容') //第三方扩展皮肤 //layer.alert('内容', { // icon: 1, // skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,去这里查阅 //}) //询问框 //layer.confirm('您是如何看待前端开发?', { // btn: ['重要', '奇葩'] //按钮 //}, function () { // layer.msg('的确很重要', { icon: 1 }); //}, function () { // layer.msg('的确是奇葩', { icon: 1 }); //}); //提示层 //layer.msg('玩命卖萌中', function () { // //关闭后的操作 //}); layer.msg('更新成功',{time:1000}, function () { parent.location.reload(); //刷新父页面 第二个参数设置msg显示的时间长短 }); //墨绿深蓝风 //layer.alert('墨绿风格,点击确认看深蓝', { // skin: 'layui-layer-molv' //样式类名 // , closeBtn: 1 //}, function () { // layer.alert('偶吧深蓝style', { // skin: 'layui-layer-lan' // , closeBtn: 1 // , anim: 4 //动画类型 // }); //}); //页面层 //layer.open({ // type: 1, // skin: 'layui-layer-rim', //加上边框 // area: ['auto', 'auto'], //宽高 // content: '<div id="dd" style="border:1px solid red;width:100px; height:100px;background-color:pink;">今天要下雪了</div>' //}); //自定页 //layer.open({ // type: 1, // skin: 'layui-layer-demo', //样式类名 // closeBtn: 1, //0不显示关闭按钮 // anim: 2, // shadeClose: true, //开启遮罩关闭 // content: '<div id="dd" style="border:1px solid red;width:100px; height:100px;background-color:pink;">今天要下雪了</div>' 也可以跳转到某个页面 content: "@Url.Action("Detial", "UserInfo")?id="+id //}); //tips层 //layer.tips('Hi我是tips', '#btn'); //第二个参数是吸附元素选择器,如#id //iframe层 //layer.open({ // type: 2, // title: 'layer mobile页', // shadeClose: true, // shade: 0.8, // area: ['70%', '90%'],//宽 高 // content: 'text.html' //}); ////加载层-默认风格 //layer.load(); ////此处演示关闭 //setTimeout(function () { // layer.closeAll('loading'); // layer.msg("关闭了"); //}, 2000); //小tips //layer.tips('我是另外一个tips,只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', { // tips: [1, '#3595CC'], // time: 4000 //}); //prompt层 //layer.prompt({ title: '输入任何口令,并确认', formType: 1 }, function (pass, index) { // layer.close(index); // layer.prompt({ title: '随便写点啥,并确认', formType: 2 }, function (text, index) { // layer.close(index); // layer.msg('演示完毕!您的口令:' + pass + '<br>您最后写下了:' + text); // }); //}); //tab层 //layer.tab({ // area: ['600px', '300px'], // tab: [{ // title: 'TAB1', // content: '内容1' // }, { // title: 'TAB2', // content: '内容2' // }, { // title: 'TAB3', // content: '内容3' // }] //}); //相册层 //$.getJSON('test/photos.json?v=' + new Date, function (json) { // layer.photos({ // photos: json //格式见API文档手册页 // , anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机 // }); //}); </script>
更多layui知识请关注PHP中文网layui教程栏目
Atas ialah kandungan terperinci layui中使用的一些弹出框. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!