layui彈出層如何使用

小編給大家分享一下layui彈出層如何使用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

layui彈出層的使用方法：首先引入jQuery1.8以上的任意版本；然后引入laery.js；最后通過“function show(){var a = layer.open({...});}”方式使用laery.open彈出層即可。

layer 在 layui 體系中的位置比較特殊，甚至讓很多人都誤以為 layui = layer ui，所以再次強(qiáng)調(diào) layer 只是作為 layui 的一個(gè)彈層模塊

1、獲取laery,你需要去官網(wǎng)下載laery.js 地址--http://layer.layui.com/

2、引入laery.js 在此之前你必須要先引入jQuery1.8以上的任意版本

<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="layer/layer.js"></script>

3、使用laery.open();

function show(){
  var a = layer.open({
    type: 2,
    area: ['80%','450px'],
    title: '我是標(biāo)題',
    shadeClose: true,
    content: ['layer_model.html','no']
  });
}

基礎(chǔ)參數(shù)

1. type 類型

type: 1,  // 0（信息框，默認(rèn)）1（頁面層）2（iframe層）3（加載層）4（tips層）

2. title 標(biāo)題

title:"我是標(biāo)題",  
//若你還需要自定義標(biāo)題區(qū)域樣式，那么你可以title: ['文本', 'font-size:18px;'] 數(shù)組第二項(xiàng)可以寫任意css樣式；
//如果你不想顯示標(biāo)題欄，你可以 title: false

3. content 內(nèi)容

3.1.如果是頁面層

layer.open({
  type: 1, 
  content: '傳入任意的文本或html' //這里content是一個(gè)普通的String
});
 
layer.open({
  type: 1,
  content: $('#id') //這里content是一個(gè)DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對(duì)元素所影響
});
 
//Ajax獲取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});

示例:

3.2.如果是iframe層

layer.open({
  type: 2, 
  content: 'http://sentsin.com' //這里content是一個(gè)URL，如果你不想讓iframe出現(xiàn)滾動(dòng)條，你還可以content: ['http://sentsin.com', 'no']
});

示例:

3.3.如果是用layer.open執(zhí)行tips層

layer.open({
  type: 4,
  content: ['內(nèi)容', '#id'] //數(shù)組第二項(xiàng)即吸附元素選擇器或者DOM
});

示例:

4. area 寬高

在默認(rèn)狀態(tài)下，layer是寬高都自適應(yīng)的，但當(dāng)你只想定義寬度時(shí)，你可以area: '500px'，高度仍然是自適應(yīng)的。當(dāng)你寬高都要定義時(shí)，你可以 area: ['500px', '300px']

5. btn 按鈕

信息框模式時(shí)，btn默認(rèn)是一個(gè)確認(rèn)按鈕，其它層類型則默認(rèn)不顯示，加載層和tips層則無效。當(dāng)您只想自定義一個(gè)按鈕時(shí)，你可以btn: '我知道了'，當(dāng)你要定義兩個(gè)按鈕時(shí)，你可以btn: ['yes', 'no']。當(dāng)然，你也可以定義更多按鈕，比如：btn: ['按鈕1', '按鈕2', '按鈕3', …]，按鈕1的回調(diào)是yes，而從按鈕2開始，則回調(diào)為btn2: function(){}，以此類推。如：

layer.open({
  content: 'test',
  btn: ['按鈕一', '按鈕二', '按鈕三'],
  yes: function(index, layero){
    //按鈕【按鈕一】的回調(diào)
  },
  btn2: function(index, layero){
    //按鈕【按鈕二】的回調(diào)
    //return false 開啟該代碼可禁止點(diǎn)擊該按鈕關(guān)閉
  },
  btn3: function(index, layero){
    //按鈕【按鈕三】的回調(diào)
    //return false 開啟該代碼可禁止點(diǎn)擊該按鈕關(guān)閉
  },
  cancel: function(){ 
    //右上角關(guān)閉回調(diào)
    //return false 開啟該代碼可禁止點(diǎn)擊該按鈕關(guān)閉
  }
});

6, shade 遮罩

即彈層外區(qū)域。默認(rèn)是0.3透明度的黑色背景（'#000'）如果你想定義別的顏色，可以shade: [0.8, '#393D49']；如果你不想顯示遮罩，可以shade: 0

如果你的遮罩是存在的那么你還可以設(shè)置 shadeClose 是否點(diǎn)擊遮罩關(guān)閉 默認(rèn)：false 如果你的shade是存在的，那么你可以設(shè)定shadeClose來控制點(diǎn)擊彈層外區(qū)域關(guān)閉

看完了這篇文章，相信你對(duì)“l(fā)ayui彈出層如何使用”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！