當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

关于layui-layer独立组件--弹出层

發布時間：2025/5/22 编程问答 78 豆豆

生活随笔收集整理的這篇文章主要介紹了关于layui-layer独立组件--弹出层小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

官方下載文檔鏈接：http://layer.layui.com/

===============================================================================

【注意事項】
一、使用時，請把文件夾layer整個放置在您站點的任何一個目錄，只需引入layer.js即可，除jQuery外，其它文件無需再引入。
二、如果您的js引入是通過合并處理或者您不想采用layer自動獲取的絕對路徑，您可以通過layer.config()來配置（詳見官網API頁）
三、jquery需1.8+
四、更多使用說明與演示，請參見layer官網。

=======================================================================================

快速上手文檔：http://layer.layui.com/hello.html

下載layer后，把它部署到你項目中的任何一個目錄（當然，我們推薦放在前端相關目錄里），你不能去挪動layer里面的文件結構，因為它們是不可拆散的組合。就像這樣：(特別說明：需要把整個layer文件夾引入你的文件中，而不是單單引入layer.js文件)

你不必去管那些文件是干嘛的，你只需要認準一個文件：layer.js 沒錯，當你試圖在頁面呈現layer的時候，你應該這樣去做：（最簡單的示例）

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/layer.css"/><style type="text/css">.btn{width: 100%;height: 50px;line-height: 50px;background: magenta;text-align: center;font-size: 15px;}</style></head><body><div class="btn">點我</div><script src="js/jquery-2.1.0.js"></script><script src="js/layer/layer.js"></script><script>$(".btn").bind("click",function(){layer.msg('點我的人最美！');});</script></body> </html> $("#btn").bind("click",function(){//layer.msg('點我的人最美！');layer.msg('此商品不存在或者已下架，看看其他商品吧！', {time: 3000}); });

更多示例：

?+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/layer.css"/><style type="text/css">.btn:nth-child(odd){width: 100%;height: 50px;line-height: 50px;background: magenta;text-align: center;font-size: 15px;}.btn:nth-child(even){width: 100%;height: 50px;line-height: 50px;background: aqua;text-align: center;font-size: 15px;}#test5{text-align: center;width: 100px;margin-left: 100px;}</style></head><body><div class="btn" id="btn">點我.btn</div><div class="btn" id="test2">點我test2</div><div class="btn" id="parentIframe">點我parentIframe</div><div class="btn" id="test4">點我test4</div><div class="btn" id="test5">點我test5</div><div class="btn" id="test6">點我test6</div><div class="btn" id="test7">點我test7</div><div class="btn" id="test8">點我test8</div><div class="btn" id="test9">點我test9</div><script src="js/jquery-2.1.0.js"></script><script src="js/layer/layer.js"></script><script>$(function(){$("#btn").bind("click",function(){layer.msg('點我的人最美！');});//彈出一個頁面層 $('#test2').on('click', function(){layer.open({type: 1,area: ['600px', '360px'],shadeClose: true, //點擊遮罩關閉 content: '\<\div style="padding:20px;">自定義內容--添加自己需要的描述內容\<\/div>'});});//彈出一個iframe層 $('#parentIframe').on('click', function(){layer.open({type: 2,title: 'iframe父子操作',maxmin: true,shadeClose: true, //點擊遮罩關閉層 area : ['800px' , '520px'],content: 'parentIframe.html'});});//彈出一個loading層 $('#test4').on('click', function(){var ii = layer.load();//此處用setTimeout演示ajax的回調 setTimeout(function(){layer.close(ii);}, 1000);});//彈出一個tips層 $('#test5').on('click', function(){layer.tips('Hello tips!', '#test5');});//======================================//多窗口模式，層疊置頂 $('#test6').on('click', function(){layer.open({type: 2 //此處以iframe舉例 ,title: '當你選擇該窗體時，即會在最頂端',area: ['390px', '330px'],shade: 0,offset: [ //為了演示，隨機坐標 Math.random()*($(window).height()-300),Math.random()*($(window).width()-390)],maxmin: true,content: 'settop.html',btn: ['繼續彈出', '全部關閉'] //只是為了演示 ,yes: function(){$(that).click(); //此處只是為了演示，實際使用可以剔除 },btn2: function(){layer.closeAll();},zIndex: layer.zIndex //重點1 ,success: function(layero){layer.setTop(layero); //重點2 }});});//配置一個透明的詢問框 $('#test7').on('click', function(){layer.msg('大部分參數都是可以公用的<br>合理搭配，展示不一樣的風格', {time: 20000, //20s后自動關閉 btn: ['明白了', '知道了', '哦']});});//示范一個公告層 $('#test8').on('click', function(){layer.open({type: 1,title: false //不顯示標題欄 ,closeBtn: false,area: '300px;',shade: 0.8,id: 'LAY_layuipro' //設定一個id，防止重復彈出 ,resize: false,btn: ['火速圍觀', '殘忍拒絕'],btnAlign: 'c',moveType: 1 //拖拽模式，0或者1 ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">內容<br>內容</div>',success: function(layero){var btn = layero.find('.layui-layer-btn');btn.find('.layui-layer-btn0').attr({href: 'http://www.layui.com/',target: '_blank'});}});});//邊緣彈出 $('#test9').on('click', function(){layer.open({type: 1,offset: 'c' //具體配置參考：offset參數項(t、r、b、l、c) ,content: '<div style="padding: 20px 80px;">內容</div>',btn: '關閉全部',btnAlign: 'c' //按鈕居中 ,shade: 0 //不顯示遮罩 ,yes: function(){layer.closeAll();}});});});</script></body> </html>

轉載于:https://www.cnblogs.com/xiangru0921/p/6728234.html

總結

以上是生活随笔為你收集整理的关于layui-layer独立组件--弹出层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Docker aufs存储驱动layer
下一篇： Java基础小常识-继承-（10）