Quelques boîtes pop-up utilisées dans layui

Première étape : fichiers de référence

Étape deux : écrire un script

<script>
//iframe窗
//layer.open({
// type: 2,
// title: false,
// closeBtn: 0, //不显示关闭按钮
// shade: [0],
// area: [&#39;340px&#39;, &#39;215px&#39;],
// offset: &#39;rb&#39;, //右下角弹出
// time: 2000, //2秒后自动关闭
// anim: 2,
// content: [&#39;text1.html&#39;, &#39;no&#39;], //iframe的url，no代表不显示滚动条 右下角页面
// end: function () { //此处用于演示
// layer.open({
// type: 2,
// title: &#39;很多时候，我们想最大化看，比如像这个页面。&#39;,
// shadeClose: true,
// shade: false,
// maxmin: true, //开启最大化最小化按钮
// area: [&#39;893px&#39;, &#39;600px&#39;],
// content: &#39;text.html&#39; //最大化页面
// });
// }
//});

//初体验
//layer.alert(&#39;内容&#39;)
//第三方扩展皮肤
//layer.alert(&#39;内容&#39;, {
// icon: 1,
// skin: &#39;layer-ext-moon&#39; //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
//})

//询问框
//layer.confirm(&#39;您是如何看待前端开发？&#39;, {
// btn: [&#39;重要&#39;, &#39;奇葩&#39;] //按钮
//}, function () {
// layer.msg(&#39;的确很重要&#39;, { icon: 1 });
//}, function () {
// layer.msg(&#39;的确是奇葩&#39;, { icon: 1 });
//});

//提示层
//layer.msg(&#39;玩命卖萌中&#39;, function () {
// //关闭后的操作
//});
layer.msg(&#39;更新成功&#39;,{time:1000}, function () {
parent.location.reload();    //刷新父页面   第二个参数设置msg显示的时间长短
});

//墨绿深蓝风
//layer.alert(&#39;墨绿风格，点击确认看深蓝&#39;, {
// skin: &#39;layui-layer-molv&#39; //样式类名
// , closeBtn: 1
//}, function () {
// layer.alert(&#39;偶吧深蓝style&#39;, {
// skin: &#39;layui-layer-lan&#39;
// , closeBtn: 1
// , anim: 4 //动画类型
// });
//});

//页面层
//layer.open({
// type: 1,
// skin: &#39;layui-layer-rim&#39;, //加上边框
// area: [&#39;auto&#39;, &#39;auto&#39;], //宽高
// content: &#39;<div id="dd" style="border:1px solid red;width:100px; height:100px;background-color:pink;">今天要下雪了</div>&#39;
//});

//自定页
//layer.open({
// type: 1,
// skin: &#39;layui-layer-demo&#39;, //样式类名
// closeBtn: 1, //0不显示关闭按钮
// anim: 2,
// shadeClose: true, //开启遮罩关闭
// content: &#39;<div id="dd" style="border:1px solid red;width:100px; height:100px;background-color:pink;">今天要下雪了</div>&#39;      也可以跳转到某个页面 content: "@Url.Action("Detial", "UserInfo")?id="+id
//});

//tips层
//layer.tips(&#39;Hi我是tips&#39;, &#39;#btn&#39;); //第二个参数是吸附元素选择器，如#id

//iframe层
//layer.open({
// type: 2,
// title: &#39;layer mobile页&#39;,
// shadeClose: true,
// shade: 0.8,
// area: [&#39;70%&#39;, &#39;90%&#39;],//宽 高
// content: &#39;text.html&#39;
//});

////加载层-默认风格
//layer.load();
////此处演示关闭
//setTimeout(function () {
// layer.closeAll(&#39;loading&#39;);
// layer.msg("关闭了");
//}, 2000);

//小tips
//layer.tips(&#39;我是另外一个tips，只不过我长得跟之前那位稍有些不一样。&#39;, &#39;吸附元素选择器&#39;, {
// tips: [1, &#39;#3595CC&#39;],
// time: 4000
//});

//prompt层
//layer.prompt({ title: &#39;输入任何口令，并确认&#39;, formType: 1 }, function (pass, index) {
// layer.close(index);
// layer.prompt({ title: &#39;随便写点啥，并确认&#39;, formType: 2 }, function (text, index) {
// layer.close(index);
// layer.msg(&#39;演示完毕！您的口令：&#39; + pass + &#39;<br>您最后写下了：&#39; + text);
// });
//});

//tab层
//layer.tab({
// area: [&#39;600px&#39;, &#39;300px&#39;],
// tab: [{
// title: &#39;TAB1&#39;,
// content: &#39;内容1&#39;
// }, {
// title: &#39;TAB2&#39;,
// content: &#39;内容2&#39;
// }, {
// title: &#39;TAB3&#39;,
// content: &#39;内容3&#39;
// }]
//});

//相册层
//$.getJSON(&#39;test/photos.json?v=&#39; + new Date, function (json) {
// layer.photos({
// photos: json //格式见API文档手册页
// , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
// });
//});
</script>

PluslayuiPour plus de connaissances, veuillez faire attention à la colonne du didacticiel layui sur le site Web PHP chinois

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!