type:基本層類型
layer提供了5種層類型。可傳入的值有:0(信息框,默認)1(頁面層)2(iframe層)3(加載層)4(tips層)。 若你采用layer.open({type: 1})方式調用,則type為必填項(信息框除外)
content - 內容
content可傳入的值是靈活多變的,不僅可以傳入普通的html內容,還可以指定DOM,更可以隨着type的不同而不同。類型:String/DOM/Array.
btn - 按鈕
信息框模式時,btn默認是一個確認按鈕,其它層類型則默認不顯示,加載層和tips層則無效。當您只想自定義一個按鈕時,你可以btn:'我知道了',當你要定義兩個按鈕時,你可以btn: ['yes', 'no']。當然,你也可以定義更多按鈕,比如:btn: ['按鈕1', '按鈕2', '按鈕3', …],按鈕1和按鈕2的回調分別是yes和cancel,而從按鈕3開始,則回調為btn3: function(){},以此類推。
success - 層彈出后的成功回調方法
類型:Function,默認:null.
當你需要在層創建完畢時即執行一些語句,可以通過該回調。success會攜帶兩個參數,分別是當前層DOM 當前層索引。
layer.open({
content: '測試回調', success: function(layero, index){ console.log(layero, index); } });
yes - 確定按鈕回調方法
類型:Function,默認:null
該回調攜帶兩個參數,分別為當前層索引、當前層DOM對象。如:
layer.open({
content: '測試回調', yes: function(index, layero){ //do something layer.close(index); //如果設定了yes回調,需進行手工關閉 } });
cancel - 右上角關閉按鈕觸發的回調
類型:Function,默認:null
該回調同樣只攜帶當前層索引一個參數,無需進行手工關閉。如果不想關閉,return false即可,如:
//只有當點擊confirm框的確定時,該層才會關閉 cancel: function(index){ if(confirm('確定要關閉么')){ layer.close(index) } return false; }
end - 層銷毀后觸發的回調
類型:Function,默認:null
無論是確認還是取消,只要層被銷毀了,end都會執行,不攜帶任何參數。
- layer.alert(content, options, yes) - 普通信息框
- layer.confirm(content, options, yes, cancel) - 詢問框
- layer.msg(content, options, end) - 提示框
- layer.load(icon, options) - 加載層
- layer.tips(content, follow, options) - tips層
- layer.close(index) - 關閉特定層
//當你想關閉當前頁的某個層時 var index = layer.open(); var index = layer.alert(); var index = layer.load(); var index = layer.tips(); //正如你看到的,每一種彈層調用方式,都會返回一個index layer.close(index); //此時你只需要把獲得的index,輕輕地賦予layer.close即可 //如果你想關閉最新彈出的層,直接獲取layer.index即可 layer.close(layer.index); //它獲取的始終是最新彈出的某個層,值是由layer內部動態遞增計算的 //當你在iframe頁面關閉自身時 var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引 parent.layer.close(index); //再執行關閉
- layer.closeAll(type) - 關閉所有層
- layer.style(index, cssStyle) - 重新定義層的樣式
- layer.title(title, index) - 改變層的標題
- layer.getChildFrame(selector, index) - 獲取iframe頁的DOM
- layer.setTop(layero) -置頂當前窗口
//通過這種方式彈出的層,每當它被選擇,就會置頂。 layer.open({ type: 2, shade: false, area: '500px', maxmin: true, content: 'http://www.layui.com', zIndex: layer.zIndex, //重點1 success: function(layero){ layer.setTop(layero); //重點2 } });