layui彈出層使用方法之最詳解

時間 2019-11-18
標籤 layui 彈出使用方法詳解简体版
原文原文鏈接
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <link rel="stylesheet" href="layui-v2.4.3/layui-v2.4.3/layui/css/layui.css">
  7     <script type="text/javascript" src="layui-v2.4.3/layui-v2.4.3/layui/layui.js"></script>
  8 </head>
  9 <body>
 10     <button class="layui-btn" id="btn1">點擊按鈕彈窗</button>
 11     <button class="layui-btn" id="btn2">alert彈窗</button>
 12     <button class="layui-btn" id="btn3">confirm彈窗</button>
 13     <button class="layui-btn" id="btn4">open-type=0[默認]</button>
 14     <button class="layui-btn" id="btn5">open-type=1[頁面層]</button>
 15     <button class="layui-btn" id="btn6">open-type=2[iframe層]</button>
 16     <button class="layui-btn" id="btn7">open-type=4[tips層]</button>
 17     <button class="layui-btn" id="btn8">[tips層]</button>
 18 </body>
 19 <div id="content" style="background-color: #00bfbf;height: 100%;width: 100%;display: none">type=2的open彈出層</div>
 20 <script>
 21     layui.use(['layer','jquery'],function () {
 22         // 定義使用jquery和layer
 23         var $ = layui.jquery;
 24         var layer = layui.layer;
 25         // 彈窗
 26         $("#btn1").click(function () {
 27             layer.msg("彈出層",{icon:1});
 28         })
 29         $("#btn2").click(function () {
 30             // 普通彈出層
 31             // layer.alert("alert 彈出層");
 32             // 彈出帶圖標的
 33             layer.alert("帶圖標的alert彈出層",{icon:4});
 34         })
 35         $("#btn3").click(function () {
 36             layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
 37                 // 這裏能夠寫點擊肯定之後的回調方法好比:
 38                 // alert("這是點擊肯定之後的回調方法" );
 39                 // 或者直接跟layui的彈窗
 40                 layer.msg("這是點擊肯定之後的回調方法",{icon:1});
 41                 layer.close(index);//關閉彈窗
 42             });
 43         })
 44         // open核心方法彈出層
 45         // type 類型爲0
 46         $("#btn4").click(function () {
 47             layer.open({
 48                 type:0,
 49                 // content:"默認彈出信息框[type=0]"
 50                 // 除了默認文字提示之外還能夠跟html代碼如:
 51                 content:"<p style='color: red'>默認彈出層樣式</p>",
 52                 // 還能夠添加圖標屬性
 53                 icon:1,
 54                 // title爲標題屬性
 55                 title:"標題屬性",
 56                 // skin爲彈出層的樣式皮膚如:
 57                 skin:"layui-layer-lan",
 58                 // area爲彈出層的寬高屬性
 59                 area:['300px','200px'],
 60                 // 設置座標用offset屬性['top','left'] auto 爲默認垂直水平居中 r爲靠右 l爲靠左 t靠頂部 b靠下(規則爲:先左右後上下)
 61                 offset:['200px','100px'],
 62                 // offset:'rt',
 63                 // 關閉按鈕樣式
 64                 closeBtn:1,//0爲不顯示,1默認,2帶有樣式
 65                 // shade爲彈出層的遮罩屬性shade['透明度','顏色']
 66                 shade:['0.1','black'],
 67                 // 點擊遮罩層關閉彈出層屬性true爲是false爲否
 68                 shadeClose:true,
 69                 // time爲延時關閉0爲不關閉,後面能夠跟毫秒數
 70                 time:'2000',
 71                 // anim爲動畫屬性後面跟屬性1,2,3,4
 72                 // anim: 0     平滑放大。默認
 73                 // anim: 1     從上掉落
 74                 // anim: 2     從最底部往上滑入
 75                 // anim: 3     從左滑入
 76                 // anim: 4     從左翻滾
 77                 // anim: 5     漸顯
 78                 // anim: 6     抖動
 79                 anim:'6',
 80                 // 顯示窗口最大化最小化;其對應的彈出層type值爲1,2有效
 81                 // maxmin:true,
 82             })
 83         })
 84         // type類型爲1
 85         $("#btn5").click(function () {
 86             layer.open({
 87                 type:1,
 88                 // type爲1能夠使用選擇器必須將內容層寫到body外面;type爲0只能使用字符安拼接的標籤如:
 89                 content:$("#content"),
 90                 area:["300px","300px"],
 91                 maxmin:true,
 92                 // time:2000,
 93                 // 按鈕btn屬性做爲彈出層的按鈕;從而去觸發另外一個事件
 94                 btn:['肯定','重置','取消'],
 95                 // 按鈕居中用btnalign其值爲c(居中),l(居左),r(居右)
 96                 // btnAlign:'c',
 97                 // 爲按鈕綁定事件
 98                 // 按鈕一綁定事件方法以下:
 99                 yes: function(index, layero){
100                     layer.msg("按鈕肯定的回調");
101                 },
102                 // 按扭二的回調
103                 // 按鈕三和按鈕二用一樣的方法,綁定事件以此類推
104                 btn2: function(index, layero){
105                     layer.msg("按鈕重置的回調方法")
106                 },
107                 btn3: function(index, layero){
108                     layer.msg("按鈕取消的回調方法")
109                     // 當return false 時點擊按鈕就不會關閉彈出層
110                     return false
111                 },
112                 // 右上角x按鈕關閉的回調
113                 cancel: function(){
114                     //右上角關閉回調
115                     layer.msg("右上角關閉按鈕的回調")
116                     //return false// 開啓該代碼可禁止點擊該按鈕關閉
117                 }
118             })
119         })
120         // type爲2的open核心彈出層(iframe彈出層)
121         $("#btn6").click(function () {
122             layer.open({
123                 // 當type爲2的時候content必須爲url
124                 type:2,
125                 // content:'layer.tanchuang.html',
126                 // content除了內部連接之外也能夠使用外部連接如:
127                 content:"http://www.baidu.com",
128                 // 若是想去除滾動條能夠使用這種樣式
129                 // content:["http://www.baidu.com",'no'],
130                 area:['1200px','500px'],
131             })
132         })
133         // type爲3的open核心彈出層
134         // tips類型爲吸附層多用於教學提示
135         $("#btn7").click(function () {
136             layer.open({
137                 type:4,
138                 content:["這是type=4的tips彈出層樣式","#btn7"],
139                 shadeClose:true,
140                 // tips是屬性爲吸附層內容顯示在元素的位置;如tips:1在元素下面
141                 tips:1,
142             })
143         })
144         // 如下也是一種吸附層的彈出
145         $("#btn8").click(function(){
146             layer.tips('只想提示地精準些', '#btn8');
147         })
148     });
149 </script>
150 </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。