layer的open使用

最近接觸到layer彈窗，感覺彈窗功能異常強大，真的很方便，所以記錄下來；

1.layer官網：http://layer.layui.com/   在這裏下載需要的js

2.語法：layer.open(options)

3.實例：

var index = layer.open({
    content: 'test'
}); //拿到的index是一個重要的憑據，它是諸如layer.close(index)等方法的必傳參數。

layer.open 根據type不同，類型也就不一樣,有五種類型：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）

其實工作開發中用的最多的就是1、2這兩種類型了，這裏就只介紹這兩種，其他的可以參考官網例子。

一、頁面層(type:1) ：彈出層展示的是某個定義好的頁面元素

layer.open({
    type: 1 //Layer提供了5種層類型。可傳入的值有：0（信息框，默認）1（頁面層）2（iframe層）3（加                    
              載層）4（tips層）,
    title: 'title here',   //標題
    area: ['390px', '330px'],   //寬高
    shade: 0.4,   //遮罩透明度
    content: $("#test"),//支持獲取DOM元素
    btn: ['確定', '取消'], //按鈕組
    scrollbar: false ,//屏蔽瀏覽器滾動條
    yes: function(index){//layer.msg('yes');    //點擊確定回調
        layer.close(index);
        showToast();
    },
    btn2: function(){//layer.alert('aaa',{title:'msg title'});  ////點擊取消回調
        layer.msg('bbb');//layer.closeAll();
    }
});

 

 

二、iframe層(type:2) ：彈出層直接調用其他地方的頁面

	layer.open({
	  type: 2, //Layer提供了5種層類型。可傳入的值有：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）,
	  shade:0.1, //遮罩層透明度
	  area:['850px','500px'], //彈出層寬高
	  title:'材料庫',//彈出層標題
	  content: 'xx/xx.jsp' //這裏content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: ['http://sentsin.com', 'no']
	});