layui中使用的一些弹出框

前端  /  管理员 发布于 6年前   321

第一步:引用文件

第二步:写脚本

<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知识请关注layui教程栏目

以上就是layui中使用的一些弹出框的详细内容，更多请关注其它相关文章！