快捷導(dǎo)航

layer.open屬性詳解及l(fā)ayer.open彈出框使用post方法舉例

更新時(shí)間：2023年12月07日 09:12:20 作者：yangyang_VV

這篇文章主要給大家介紹了關(guān)于layer.open屬性詳解及l(fā)ayer.open彈出框使用post方法的相關(guān)資料,最近接觸到layer彈窗,感覺彈窗功能異常強(qiáng)大,真的很方便,所以記錄下來,需要的朋友可以參考下

一、常用屬性詳解：

layer.open({
    // 基本層類型：0（信息框，默認(rèn)）1（頁面層）2（iframe層，也就是解析content）3（加載層）4（tips層）
    type: 1,
    title: "標(biāo)題",
    // 當(dāng)type: 2時(shí)就是url
    content: "內(nèi)容/url",
    // 如果不想要界面滾動(dòng)條可以這樣寫
    //content: ["內(nèi)容/url",'no']
    // 寬高：如果是100%就是滿屏
    area: ['733px', '450px'],
    // 坐標(biāo)：auto（默認(rèn)坐標(biāo)，即垂直水平居中），具體當(dāng)文檔：https://www.layui.com/doc/modules/layer.html#offset
    offset: 'auto',
    // 按鈕：按鈕1的回調(diào)是yes（也可以是btn1），而從按鈕2開始，則回調(diào)為btn2: function(){}，以此類推
    btn: ['按鈕1', '按鈕2'],
    // 關(guān)閉按鈕：layer提供了兩種風(fēng)格的關(guān)閉按鈕，可通過配置1和2來展示，如果不顯示，則0
    closeBtn: 1,
    // 遮罩：默認(rèn)：0.3透明度的黑色背景（'#000'）
    shade: 0.3,
    // 是否點(diǎn)擊遮罩關(guān)閉：默認(rèn)：false
    shadeClose: false,
    // 自動(dòng)關(guān)閉所需毫秒：默認(rèn)：0不會自動(dòng)關(guān)閉
    time: 0,
    // 最大最小化：默認(rèn)：false
    maxmin: false,
    // 固定：默認(rèn)：true
    fixed: true,
    // 是否允許拉伸：默認(rèn)：true
    resize: true,
    // 層疊順序：默認(rèn)：19891014，一般用于解決和其它組件的層疊沖突
    zIndex: 19891014,
    // 層彈出后的成功回調(diào)方法：layero前層DOM，index當(dāng)前層索引
    success: function(layero, index){
    },
    // 第一個(gè)按鈕事件，也可以叫btn1
    yes: function (index, layero) {
    },
    btn2: function (index, layero) {
        layer.close(index);
    },
    // 右上角關(guān)閉按鈕觸發(fā)的回調(diào)：默認(rèn)會自動(dòng)觸發(fā)關(guān)閉。如果不想關(guān)閉，return false即可
    cancel: function(index, layero){
        if(layer.confirm('確定要關(guān)閉么')){ //只有當(dāng)點(diǎn)擊confirm框的確定時(shí)，該層才會關(guān)閉
            layer.close(index);
        }
        return false;
    },
    // 層銷毀后觸發(fā)的回調(diào)：無論是確認(rèn)還是取消，只要層被銷毀了，end都會執(zhí)行，不攜帶任何參數(shù)。
    end: function(){
    },
    // 最大化后觸發(fā)的回調(diào)：攜帶一個(gè)參數(shù)，即當(dāng)前層DOM
    full: function(layero){
    },
    // 最小化后觸發(fā)的回調(diào)：攜帶一個(gè)參數(shù)，即當(dāng)前層DOM
    min: function(layero){
    },
    // 還原后觸發(fā)的回調(diào)：攜帶一個(gè)參數(shù)，即當(dāng)前層DOM
    restore: function(layero){
    },
});

例子：

layer.open({
    type: 1,
    title: "標(biāo)題",
    content: "內(nèi)容/url",
    area: ['733px', '450px'],
    offset: 'auto',
    btn: ['按鈕1', '按鈕2'],
    closeBtn: 1,
    shade: 0.3,
    shadeClose: false,
    time: 0,
    maxmin: false,
    fixed: true,
    resize: true
    zIndex: 19891014,
    success: function(layero, index){
    },
    yes: function (index, layero) {
    },
    btn2: function (index, layero) {
        layer.close(index);
    },
    cancel: function(index, layero){
            layer.close(index);
        }
        return false;
    },
    end: function(){
    },
    full: function(layero){
    },
    min: function(layero){
    },
    restore: function(layero){
    },
});

二：layer.open GET方式說明

如下段代碼所示，是最常見的layer.open使用方式。這里有幾點(diǎn)需要說明：

type 基本層類型，layer提供了5種層類型?？蓚魅氲闹涤校?（信息框，默認(rèn)）、1（頁面層）、2（iframe層）、3（加載層）、4（tips層）。
layer.open其底層采用的就是get請求方式，因此使用layer.open的彈出層頁面?zhèn)鲄⒅荒苁瞧唇釉趗rl后面。
對于type=2的彈出框，可以使用圖示中的方法調(diào)用子頁面彈出框的doSubmit() 方法，并獲取該方法的返回值。

layer.open({
	type: 2,
	area: ["900px", "520px"],
	title: "子頁面-彈出框",
	content: "${basePath}/aaa/bbb/get?id=1",
	btn: ['確定', '關(guān)閉'],
	yes: function (index, layero) {
		// 調(diào)用子頁面（彈出框）的doSubmit方法并獲取其返回值
        var iframeWin = layero.find('iframe')[0];
        var data = iframeWin.contentWindow.doSubmit();
	},
	cancel: function (layer_window) {
        // 關(guān)閉彈出框頁面
		layer.close(layer_window);
	}
});

三、layer.open POST方式介紹

由于layer.open其底層就是get請求方式，因此，如果需要使用post請求的話，必須要引入其他方式，這里采用ajax。

思路：用ajax通過post方式傳參請求到頁面的html，然后通過layer.open方法展示出來。

$.ajax({
	type: "POST",
	url: "${basePath}/aaa/bbb/post",
	data: {"id":1, "type":2, "code":3},
	success: function(res) {
        var html = res.data;
		layer.open({
			type: 1,
			area: ["900px", "520px"],
			title: "子頁面-彈出層",
			content: html,
			btn: ['確定', '關(guān)閉'],
			yes: function (index, layero) {
                // 調(diào)用子頁面（彈出框）的doSubmit方法并獲取其返回值
				var context = layero.find('page').context;
				var data = context.defaultView.doSubmit();
			},
			cancel: function (layer_window) {
                // 關(guān)閉彈出框頁面
				layer.close(layer_window);
			}
		});
	}
});

如上段代碼所示，是layer.open post請求頁面的方放。這里有幾點(diǎn)需要說明：

type必須為1，因?yàn)檫@里layer.open的content是直接給出HMTL代碼的。
調(diào)用子頁面方法的方式發(fā)生了改變，如上實(shí)例。

附：iframe層(type:2) ：彈出層直接調(diào)用其他地方的頁面

	layer.open({
	  type: 2, //Layer提供了5種層類型?？蓚魅氲闹涤校?（信息框，默認(rèn)）1（頁面層）2（iframe層）3（加載層）4（tips層）,
	  shade:0.1, //遮罩層透明度
	  area:['850px','500px'], //彈出層寬高
	  title:'材料庫',//彈出層標(biāo)題
	  content: 'xx/xx.jsp' //這里content是一個(gè)URL，如果你不想讓iframe出現(xiàn)滾動(dòng)條，你還可以content: ['http://sentsin.com', 'no']
	});