前端框架layui之彈出層

時間 2019-11-20

標籤前端框架 layui 彈出简体版

原文原文鏈接

1.導入插件css

layui使用須要導入layui的js和css:html

<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.js"></script>

2.layui彈出層jquery

引入layer，如下的其餘代碼均在...的位置實現：ajax

<script>
     layui.use('layer',function(){
     　　var layer=layui.layer;
     　　.....//代碼
　　});
</script>

2.1最基本的消息框：json

type : 基本層類型,類型：Number，默認：0。可傳入的值有：0（信息框），1（頁面層），2（iframe層），3（加載層），4（tips層）。若是想點擊一個框而不影響其餘的彈出框，在頁面通常讓type爲1。瀏覽器

layer.open({
    type:1,
    title:['提示信息']
})

2.2消息提示框測試

括號裏面的第一個是顯示的信息，後面的要顯示的圖標，數字不一樣表明的圖標不一樣。想顯示圖標時，默認皮膚能夠傳入0-6，若是是加載層，能夠傳入0-2。動畫

layer.alert('酷斃了', {icon: 1});//顯示圖標

layer.alert('酷斃了');//不顯示圖標

這個消息框顯示3秒鐘後會消失，默認是3秒。ui

layer.msg("我是消息彈框，我3秒後消失");

能夠自定義標題和內容的消息提示框：this

layer.open({
    skin:'demo-class',//設置彈框樣式
    area:['260px','160px'],//彈框的大小（寬，高），默認：'auto'
    title:['信息提示框','15px'],//彈框的標題
    content: '恭喜你經過了英語四級考試'//顯示的消息內容
})

skin是設置彈框的標題的樣式，若不自定義樣式就採用默認的樣式，也能夠本身定義樣式，添加css樣式，都是能夠設置成本身須要的顏色：

body .demo-class .layui-layer-title{background:#63B8FF;  border: none;}

2.2多個按鈕的消息確認框

確認與取消框：btn最後的按鈕默認是取消按鈕，默認會關閉彈框。準確的介紹見下文！

layer.confirm("肯定刪除嗎？",{
    btn2: function(index, layero){
        //按鈕【按鈕二】的回調
        alert("點擊了取消按鈕")
    }
},
function(index, layero){
  //按鈕【按鈕一】的回調
  alert("點擊了肯定按鈕")
}
);

自定義可禁止關閉按鈕的多按鈕彈框：

layer.open({
     content: '你知道牛頓定律嗎？'
    ,btn: ['熟悉', '瞭解', '不清楚'],
    //默認最後一個按鈕是關閉窗口的按鈕
    yes: function(index, layero){
    　　alert("熟悉");
    　　return false; //開啓該代碼可禁止點擊該按鈕來關閉窗口
    }
    ,btn2: function(index, layero){
    　　//按鈕【按鈕二】的回調
    　　alert("瞭解");
    　　return false;
    }
    ,btn3: function(index, layero){
         //按鈕【按鈕三】的回調
        alert("不清楚");
        return false;
     }
     ,cancel: function(){ 
        //右上角關閉回調
        alert("關閉啦");
    }
});

2.3 按鈕排列

btnAlign，類型：String，默認：'r'。'l'居左對齊，'c'居中對齊。

layer.open({
    btnAlign:'l',//設置靠左對齊
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你經過了英語四級考試'
})

2.4關閉按鈕樣式

closeBtn，類型：String/Boolean，默認：1 。layer提供了兩種風格的關閉按鈕，可經過配置1和2來展現，若是不顯示，則closeBtn: 0。三種樣式以下：

layer.open({
 closeBtn:'2',//設置爲第二種樣式
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你經過了英語四級考試'
})

2.5 遮罩

shade，類型：String/Array/Boolean，遮罩即彈層外區域，默認是0.3透明度的黑色背景（'#000'）。不想顯示遮罩，能夠shade: 0。

layer.open({
    shade:[0.8,'#00ff00'],//彈框外層是透明度爲0.8的#00ff00顏色
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你經過了英語四級考試'
})

2.6是否點擊遮罩關閉

shadeClose,類型：Boolean，默認：false，即點擊遮罩不關閉。若是你的shade是存在的，那麼你能夠設定shadeClose來控制點擊彈框外區域關閉。

layer.open({
    shadeClose: true,//點擊彈框之外的區域關閉彈框
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你經過了英語四級考試'
})

2.7設置自動關閉的時間

time，類型：Number，默認：0，自動關閉所需毫秒。想自動關閉時，使用time: 5000，即表明5秒後自動關閉，單位是毫秒（1秒=1000毫秒）。

layer.open({
    time: 5000,//5s後自動關閉
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你經過了英語四級考試'
})

2.8彈層惟一標識

id，類型：String，默認：空字符。設置該值後，不論是什麼類型的層，都只容許同時彈出一個（通常看到的是彈出位置最後的一個）。通常用於頁面層和iframe層模式。

layer.open({
    id:'open1',//設置id
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你經過了英語四級考試'
})

2.9彈出動畫

anim，類型：Number，默認：0。目前anim可支持的動畫類型有0-6 若是不想顯示動畫，設置 anim: -1 便可。

0：平滑放大　　1：從上掉落　　2：從最底部往上滑入　　3：從左滑入

4：從左翻滾　　5：漸顯　　　　6：抖動

layer.open({
    anim:1,//設置出現的動畫效果
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你經過了英語四級考試'
})

2.10關閉動畫

isOutAnim，類型：Boolean，默認：true。默認狀況下，關閉層時會有一個過分動畫。若是不想開啓，設置 false 便可。

layer.open({
    isOutAnim:false,//關閉過分動畫
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你經過了英語四級考試'
})

2.11最大最小化

maxmin，類型：Boolean，默認：false。該參數值對type:1和type:2有效。默認不顯示最大小化按鈕。須要顯示配置maxmin: true便可。

layer.open({
    type: 1,
    maxmin: true,//可調整大小化
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你經過了英語四級考試'
})

2.12固定

fixed，類型：Boolean，默認：true，即鼠標滾動時，彈出層是否固定在可視區域。若是不想，設置fixed: false便可。

2.13是否容許拉伸

resize，類型：Boolean，默認：true。默認狀況下，你能夠在彈層右下角拖動來拉伸尺寸。若是對指定的彈層屏蔽該功能，設置 false便可。該參數對loading、tips層無效。

layer.open({
    resize: false,//不容許窗口拉伸
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你經過了英語四級考試'
})

2.14監聽窗口拉伸動做

resizing，

類型：Function，默認：null。當拖拽彈層右下角對窗體進行尺寸調整時，若是設定了該回調，則會執行。回調返回一個參數：當前層的DOM對象。

layer.open({
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你經過了英語四級考試'，
     //當窗口拉伸時自動調用
     resizing:function(layor){
        console.log(layor);//這裏會打印不少次，應該是改變必定的尺寸就會調用一次
 }
})

2.15是否容許瀏覽器出現滾動條

scrollbar，類型：Boolean，默認：true。默認容許瀏覽器滾動，若是設定scrollbar: false，則屏蔽。

layer.open({
    scrollbar:false,//禁止瀏覽器出現滾動條
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你經過了英語四級考試'，
    }
})

2.16設置彈框的位置座標　　

offset，類型：String/Array，默認'auto'：垂直水平居中。也能夠設置如下的參數：

offset: '100px'	只定義top座標，水平保持居中	offset: ['100px', '50px']	同時定義top、left座標
offset: 't'	設置頂部座標（水平居中靠頂）	offset: 'r'	設置右邊緣座標（垂直居中靠右）
offset: 'b'	設置底部座標（水平居中靠低）	offset: 'l'	設置左邊緣座標（垂直居中靠左）
offset: 'lt'	設置左上角（處於左上角）	offset: 'lb'	設置左下角（處於左下角）
offset: 'rt'	設置右上角（處於右上角）	offset: 'rb'	設置右下角（處於右下角）

layer.open({
    offset: '100px',//會水平居中顯示,距離頂部100px
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你經過了英語四級考試'，
    }
})

2.17最大寬度、最大高度

maxWidth，類型：Number，默認：360。只有當area: 'auto'時，maxWidth的設定纔有效。

layer.open({
    skin:'demo-class',
    content: '恭喜你經過了英語四級考試'，
   maxWidth: 1000,//當內容寬度超過1000時纔會換行
})

maxHeight，類型：Number，默認：無。只有當高度自適應時，maxHeight的設定纔有效。

layer.open({
    skin:'demo-class', content: '恭喜你經過了英語四級考試'，  maxHeighr: 100,//當內容高度超過100時會出現滾動條，若是設置了固定的高度也會出現這種狀況 })

2.18層疊順序*

zIndex，類型：，默認：19891014（賢心生日 0.0），通常用於解決和其它組件的層疊衝突。

2.19彈框拖拽

1）設置觸發拖動的元素

move，類型：String/DOM/Boolean，默認：'.layui-layer-title'。默認是觸發標題區域拖拽來移動彈框。若是想單獨定義，指向元素的選擇器或者DOM便可。如move: '.mine-move'。設定move: false來禁止拖。

layer.open({
    skin:'demo-class',
    content: '恭喜你經過了英語四級考試'，
    move:false,//禁止拖拽彈框
})

2）是否容許拖拽到窗口外

moveOut，類型：Boolean，默認：false。默認只能在窗口內拖拽，若是你想讓拖到窗外，那麼設定moveOut: true便可。

3）拖動完畢後的回調方法

moveEnd，類型：Function，默認：null。默認不會觸發moveEnd，若是你須要，設定moveEnd: function(layero){}便可，其中layero爲當前層的DOM對象。

layer.open({
    btn:['肯定','取消'],
    type:1,
    skin:'demo-class',
    content: '恭喜你經過了英語四級考試',
    moveEnd:function(index,layero){//拖拽後執行的方法
        layer.open({
        skin:'demo-class',
        content: '你拖拽了彈框', }); }
})

2.20tips

1）tips方向和顏色

tips，類型：Number/Array，默認：2。是tips層的私有參數。支持上右下左四個方向，經過1-4進行方向設定。如tips: 3則表示在元素的下面出現。有時你還可能會定義一些顏色，能夠設定tips: [1, '#c00']。

<body>
    <input type="text" id="id" />
</body>
<script>
layui.use(['layer'],function(){
    var layer=layui.layer;
    layer.tips('從下面顯示', '#id', {tips: [1,'#f0f']});
});
</script>

2）是否容許多個tips

tipsMore，類型：Boolean，默認：false。容許多個意味着不會銷燬以前的tips層。經過tipsMore: true開啓。

layer.tips('從下面顯示', '#id', {
    tips: [1,'#f0f'],
    tipsMore:true,
　}
);
layer.tips('從右面顯示', '#id',{tipsMore:true,});

2.21方法回調

1）彈框彈出成功的回調

success，類型：Function，默認：null。當你須要在層建立完畢時即執行一些語句，能夠經過該回調。success會攜帶兩個參數，分別是當前層DOM、當前層索引。

layer.open({
    content: '測試回調',
    success: function(layero, index){ console.log(layero, index); }
});

2）肯定按鈕回調

yes，類型：Function，默認：null。該回調攜帶兩個參數，分別爲當前層索引、當前層DOM對象。

layer.open({
    content: '測試回調',
    yes: function(layero, index){ alert("你點擊了肯定按鈕") }
});

3）右上角關閉按鈕觸發的回調

cancel，類型：Function，默認：null。該回調攜帶兩個參數，分別爲：當前層索引參數（index）、當前層的DOM對象（layero），默認會自動觸發關閉。若是不想關閉，return false便可。

layer.open({
    content: '測試回調',
   cancel: function(index, layero){ if(confirm('肯定要關閉麼')){ //只有當點擊confirm框的肯定時，該層纔會關閉
             layer.close(index)；//關閉彈框的方式
         }
         return false; }  
});

4）彈框銷燬後觸發的回調

layer.open({
    content: '測試回調',
    btn:['肯定','取消'],
    yes:function(index,layero){
        return false;//肯定按鈕禁止關閉彈框
    },
    end:function(){//彈框銷燬（關閉）後執行
        alert("彈框被銷燬啦") }
});

5）最大化、最小化、還原後觸發的回調

full/min/restore，類型：Function，默認：null。攜帶一個參數，即當前層DOM。

layer.open({
    content: '測試回調',
    btn:['肯定','取消'],
    type:1,
    maxmin:true,
    full:function(layero){
        alert("點擊最大化時執行")
    },
    min:function(layero){
        alert("點擊最小化時執行")
    },
    restore:function(layero){
        alert("點擊還原時執行") }
});

2.22深刻理解layer的方法

1）初始化全局配置 layer.config(options)

它不只能夠配置一些諸如路徑、加載的模塊，甚至還能夠決定整個彈層的默認參數。

layer.config({
  anim: 1, //默認動畫風格
  skin: 'layui-layer-molv' //默認皮膚
  …
});

除此以外，extend還容許你加載拓展的css皮膚，以下：

layer.config({
   //若是是獨立版的layer，則將myskin存放在./skin目錄下
   //若是是layui中使用layer，則將myskin存放在./css/modules/layer目錄下
   extend: 'myskin/style.css'
});

2）初始化就緒 layer.ready(callback)

因爲layer內置了輕量級加載器，因此你根本不須要單獨引入css等文件。可是加載老是須要過程的。當你在頁面一打開就要執行彈框時，你最好是將彈框放入ready方法中，如：

//頁面一打開就執行彈層
layer.ready(function(){
   layer.alert('很高興一開場就見到你');
});

3)原始核心方法 layer.open(options)

基本上是露臉率最高的方法，不論是使用哪一種方式建立層，都是走layer.open()，建立任何類型的彈層都會返回一個當前層索引。

var index=layer.open({
    content: '核心方法',
});
//能夠經過layer.close(index)來關閉這個彈框

4）普通訊息框 layer.alert(content, options, yes)

相似系統alert，但卻比alert更靈便。它的參數是自動向左補齊的。經過第二個參數，能夠設定各類你所須要的基礎參數，但若是你不須要的話，直接寫回調便可。

layer.alert("只顯示提示的內容");

layer.alert("有圖標的顯示內容",{icon:3})

layer.alert("我有回調，需點擊肯定時執行",{icon:1},function(){
    console.log("點擊了肯定，執行了回調")
})

5)確認框 layer.confirm(content, options, yes, cancel)

相似系統confirm，但卻遠勝confirm，另外它不是和系統的confirm同樣阻塞你須要把交互的語句放在回調體中。一樣的，它的參數也是自動補齊的。

//最完整的寫法，不過通常取消是不用的，能夠省略
layer.confirm("肯定刪除嗎？",{
      icon:3,
    },
    function(index){
        alert("點擊了確認");
    },
    function(index){
        alert("點擊了取消")
    }
);

也能夠這樣寫，把取消按鈕放在optionsh中，也能夠在options中btn，換成本身的文字：

layer.confirm("肯定刪除嗎？",{
        icon:3,
        //btn:['是','否'],
        btn2:function(index){
            alert("點擊了取消")
        }
    },
    function(index){
        alert("點擊了確認");
    },
);

最經常使用也是最簡單的方式以下：

layer.confirm("肯定刪除嗎？",
    function(index){
        alert("點擊了確認");//do something
    },
);

6）提示框 layer.msg(content, options, end)

它佔據不多的面積，默認會3秒後自動消失，堅持零用戶操做，參數也是自動補齊的。

layer.msg("只顯示簡單的內容");

layer.msg("我有圖標啦",{icon:3})

layer.msg("我還有回調方法",{
        icon:3,
        time:5000,//5秒後自動關閉,默認是3秒
    },
    function(){
    //添加關閉後執行的操做
    alert("關閉啦")
})

7）加載層 layer.load(icon, options)

type:3的深度定製。load並不須要傳太多的參數，若是不喜歡默認的加載風格，還有選擇空間。icon支持傳入0-2。若是是0，無需傳，是默認的。load默認是不會自動關閉的，通常會在ajax回調體中關閉它。關閉使用layer.close(index);

var index = layer.load();//默認是0

var index = layer.load(1); //換成1的風格

var index = layer.load(2, {time: 10*1000}); //換2的方格，而且設定最長等待10秒，而後會自動關閉

8）tips層 layer.tips(content, follow, options)

type:4的深度定製。它擁有和msg同樣的低調和自覺，並且會智能定位，即靈活地判斷它應該出如今哪邊，默認是在元素右邊彈出。

定義一個輸入框，方便提示：

<input type="text" id="id" />

輸入提示：

layer.tips('簡單版：這裏輸入用戶信息', '#id');

在元素的事件回調體中執行，若是這樣使用，須要引入jquery：

$('#id').on('click', function(){
  var that = this;
  layer.tips('只想提示地精準些', that);
});

完整的方式：

layer.tips('從下面顯示', '#id', {tips: 1;time:5000});

9）關閉彈框

a.關閉單個 layer.close(index)

關閉特定的彈框：根據須要，指定索引來關閉

var index = layer.open();
layer.close(index);

關閉最新彈出的層：

layer.close(layer.index); //它獲取的始終是最新彈出的某個層，值是由layer內部動態遞增計算的

在iframe頁面關閉自身*：

var index = parent.layer.getFrameIndex(window.name); //先獲得當前iframe層的索引
parent.layer.close(index); //再執行關閉

b.關閉全部的彈框 layerAll(type)

layer.closeAll(); //瘋狂模式，關閉全部層
layer.closeAll('dialog'); //關閉信息框
layer.closeAll('page'); //關閉全部頁面層
layer.closeAll('iframe'); //關閉全部的iframe層
layer.closeAll('loading'); //關閉加載層
layer.closeAll('tips'); //關閉全部的tips層

10)從新定義層的樣式 layer.style(index, cssStyle)

該方法對loading層和tips層無效。參數index爲層的索引，cssStyle容許你傳入任意的css屬性。

var index = layer.open();
//從新給指定層設定width、top等
layer.style(index, {
  width: '400px',
  top: '10px'
});

11）改變層的標題 layer.title(title, index)

var index = layer.open();
layer.title("輸入信息",index)

12）獲取iframe頁的DOM layer.getChildFrame(selector, index)*

當你試圖在當前頁獲取iframe頁的DOM元素時，你能夠用此方法。

js代碼：

layer.open({
  type: 2,
  content: 'iframe.html',//這裏須要自定義頁面
  success: function(layero, index){
    var body = layer.getChildFrame('body', index);
    //獲得iframe頁的窗口對象，執行iframe頁的方法：iframeWin.method();
    var iframeWin = window[layero.find('iframe')[0]['name']]; 
    console.log(bodt.html()) //獲得iframe頁的body內容
    body.find('#id').val('Hi，我是從父頁來的')
  }
});

iframe.html頁面：

<body>
    輸入信息：<input type="text" class="layui-input" id="id" name='name' />
    <br>
    輸入信息：<input type="text" class="layui-input" id="id2" name='name2' />
</body>

13）獲取特定iframe層的索引 layer.getFrameIndex(windowName) *

此方法通常用於在iframe頁關閉自身時用到。

//假設這是iframe頁
var index = parent.layer.getFrameIndex(window.name); //先獲得當前iframe層的索引
parent.layer.close(index); //再執行關閉

14）指定iframe層自適應 layer.iframeAuto(index) *

調用該方法時，iframe層的高度會從新進行適應

15）重置特定iframe url。layer.iframeSrc(index, url)*

16）置頂當前窗口 layer.setTop(layero)

當你的頁面有不少不少layer窗口，你須要像Window窗體那樣，點擊某個窗口，該窗體就置頂在上面，那麼setTop能夠來輕鬆實現。

17）手工執行最大小化 layer.full()、layer.min()、layer.restore() *

layer.open({
    btn:['最大化','最小化','還原'],
    context:'點擊按鈕呀',
    yes:function(index,layero){
          layer.full();
          return false;
    },btn2:function(index,layero){
          layer.min();
           return false;
    },btn3:function(index,layero){
          layer.restore();
           return false;
    }
});

18）輸入層 layer.prompt(options, yes)

prompt的參數也是向前補齊的。options不只可支持傳入基礎參數，還能夠傳入prompt專用的屬性。固然，也能夠不傳。yes攜帶value:表單值 index:索引 elem:表單元素。

prompt層新定製的成員以下：

{
  formType: 1, //輸入框類型，支持0（文本）默認1（密碼）2（多行文本）
  value: '', //初始時的值，默認空字符
  maxlength: 140, //可輸入文本的最大長度，默認500
}

最簡單的輸入層：

layer.prompt(function(value,index,elem){
    alert(value);
    layer.close(index);
})

加入屬性的輸入層：

layer.prompt({
  formType: 2,
  value: '',
  title: '請輸入內容',
  area: ['800px', '350px'] //自定義文本域寬高
}, function(value, index, elem){
      alert(value); //獲得value
      layer.close(index);
});

19） tab層 layer.tab(options)

tab層只單獨定製了一個成員，即tab: []

layer.tab({
  area: ['600px', '300px'],
  tab: [{
    title: '基本信息', 
    content: '張三'
  }, {
    title: '身體情況', 
    content: '身體很是的健康'
  }, {
    title: '經濟情況', 
    content: '貧困潦倒'
  }]
});