layui彈出層如何使用-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司長期為近1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為單縣企業(yè)提供專業(yè)的網(wǎng)站設(shè)計、成都網(wǎng)站制作，單縣網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

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

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

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: '我是標題',
    shadeClose: true,
    content: ['layer_model.html','no']
  });
}

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

1. type 類型

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

2. title 標題

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

3. content 內(nèi)容

3.1.如果是頁面層

layer.open({
  type: 1, 
  content: '傳入任意的文本或html' //這里content是一個普通的String
});
 
layer.open({
  type: 1,
  content: $('#id') //這里content是一個DOM，注意：好該元素要存放在body最外層，否則可能被其它的相對元素所影響
});
 
//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是一個URL，如果你不想讓iframe出現(xiàn)滾動條，你還可以content: ['http://sentsin.com', 'no']
});

示例:

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

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

示例:

4. area 寬高

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

5. btn 按鈕

信息框模式時，btn默認是一個確認按鈕，其它層類型則默認不顯示，加載層和tips層則無效。當您只想自定義一個按鈕時，你可以btn: '我知道了'，當你要定義兩個按鈕時，你可以btn: ['yes', 'no']。當然，你也可以定義更多按鈕，比如：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 開啟該代碼可禁止點擊該按鈕關(guān)閉
  },
  btn3: function(index, layero){
    //按鈕【按鈕三】的回調(diào)
    //return false 開啟該代碼可禁止點擊該按鈕關(guān)閉
  },
  cancel: function(){ 
    //右上角關(guān)閉回調(diào)
    //return false 開啟該代碼可禁止點擊該按鈕關(guān)閉
  }
});

6, shade 遮罩

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

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

看完了這篇文章，相信你對“l(fā)ayui彈出層如何使用”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享題目：layui彈出層如何使用-創(chuàng)新互聯(lián)
鏈接地址：http://bm7419.com/article46/cedjeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、搜索引擎優(yōu)化、品牌網(wǎng)站制作、網(wǎng)站策劃、品牌網(wǎng)站設(shè)計、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)