layer 二次封装

$.loading = function (bool, text) {
    var $loadingpage = top.$("#loadingPage");
    var $loadingtext = $loadingpage.find('.loading-content');
    if (bool) {
        $loadingpage.show();
    } else {
        if ($loadingtext.attr('istableloading') == undefined) {
            $loadingpage.hide();
        }
    }
    if (!!text) {
        $loadingtext.html(text);
    } else {
        $loadingtext.html("数据加载中,请稍后…");
    }
    $loadingtext.css("left", (top.$('body').width() - $loadingtext.width()) / 2 - 50);
    $loadingtext.css("top", (top.$('body').height() - $loadingtext.height()) / 2);
}

$.getLayerIframeId = function (layerId) {  
    var iframeId = top.$("#" + layerId).find("iframe").attr("id");  
    return iframeId;  
}  
$.currentWindow =function  () {
    var iframeId = top.$(".iframe:visible").attr("data-id");
    var target = top.$('.iframe[data-id="' + iframeId + '"]');
    return  top.$(window.parent.document).contents().find(target)[0].contentWindow;
} 
$.modalOpen = function (options) {  
	var defaults = {
	        id: null,
	        title: '系统窗口',
	        width: "100px",
	        height: "100px",
	        url: '',
	        shade: 0.3,
	        btn: ['确认', '关闭'],
	        btnclass: ['btn btn-primary', 'btn btn-danger'],
	        callBack: null
	    };
	    var options = $.extend(defaults, options);
	    var _width = top.$(window).width() > parseInt(options.width.replace('px', '')) ? options.width : top.$(window).width() + 'px';
	    var _height = top.$(window).height() > parseInt(options.height.replace('px', '')) ? options.height : top.$(window).height() + 'px';
	    top.layer.open({
	        id: options.id,
	        type: 2,
	        shade: options.shade,
	        title: options.title,
	        fix: false,
	        maxmin: true, //开启最大化最小化按钮
	        area: [_width, _height],
	        content: options.url,
	        tipsMore:options.tipsMore,
	        btn: options.btn,
	        yes: function (index,layero) {
	        	 $(window.parent.document).contents().find(layero.find('iframe')[0])[0].contentWindow.submitForm(); 
	        }, cancel: function () {
	            return true;
	        }
	    }); 
}  
 
$.modalConfirm = function (content, callBack) {  
    top.layer.confirm(content, {  
        icon: "fa-exclamation-circle",  
        title: "系统提示",  
        btn: ['确认', '取消'],  
        btnclass: ['btn btn-primary', 'btn btn-danger'],  
    }, function () {  
        callBack(true);  
    }, function () {  
        callBack(false)  
    });  
}  
$.modalAlert = function (content, type) {  
    var icon = "";  
    if (type == '0') {
        icon = 1;
    }else if (type == '-100') {
        icon = 2;
    }else{
        icon = 7;
    } 
    top.layer.alert(content, {  
        icon: icon,  
        title: "系统提示",  
        skin: 'layui-layer-lan',
        btn: ['确认'],  
        btnclass: ['btn btn-primary'],  
    });  
}  
$.modalMsg = function (content,type) {  
	if (type != undefined) {
        var icon = "";
        if (type == '0') {
            icon = 1;
        }else if (type == '-100') {
            icon = 2;
        }else{
            icon = 7;
        }
        top.layer.msg(content, { icon: icon, time: 2000, shift: 5 });
        top.$(".layui-layer-msg").find('i.' + icon).parents('.layui-layer-msg').addClass('layui-layer-msg-' + type);
    } else {
        top.layer.msg(content);
    }
}  
$.modalClose = function () {
    var index = top.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    var $IsdialogClose = top.$("#layui-layer" + index).find('.layui-layer-btn').find("#IsdialogClose");
    var IsClose = $IsdialogClose.is(":checked");
    if ($IsdialogClose.length == 0) {
        IsClose = true;
    }
    if (IsClose) {
        top.layer.close(index);
    } else {
        location.reload();
    }
}
$.submitForm = function (options) {
    var defaults = {
        url: "",
        param: [],
        loading: "正在提交数据...",
        success: null,
        close: true
    };
    var options = $.extend(defaults, options);
    $.loading(true, options.loading);
    window.setTimeout(function () {
        $.ajax({
            url: options.url,
            data: options.param,
            type: "post",
            dataType: "json",
            success: function (data) {
                if (data.state == "0") {
                    options.success(data);
                    $.modalMsg(data.message, data.state);
                    if (options.close == true) {
                        $.modalClose();
                    }
                } else {
                    $.modalMsg(data.message, data.state);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $.loading(false);
                $.modalMsg(errorThrown, "error");
            },
            beforeSend: function () {
                $.loading(true, options.loading);
            },
            complete: function () {
                $.loading(false);
            }
        });
    }, 500);
}
$.deleteForm = function (options) {
    var defaults = {
        prompt: "注:您确定要删除该项数据吗?",
        url: "",
        param: [],
        loading: "正在删除数据...",
        success: null,
        close: true
    };
    var options = $.extend(defaults, options);
    $.modalConfirm(options.prompt, function (r) {
        if (r) {
            $.loading(true, options.loading);
            window.setTimeout(function () {
                $.ajax({
                    url: options.url,
                    data: options.param,
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        if (data.state == "success") {
                            options.success(data);
                            $.modalAlert(data.message, data.state);
                        } else {
                            $.modalAlert(data.message, data.state);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $.loading(false);
                        $.modalMsg(errorThrown, "error");
                    },
                    beforeSend: function () {
                        $.loading(true, options.loading);
                    },
                    complete: function () {
                        $.loading(false);
                    }
                });
            }, 500);
        }
    });

}

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的 layer 弹窗封装示例,可以在网页中使用: ```html <!-- 引入 layer 的样式文件和脚本文件 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/theme/default/layer.css"> <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script> <!-- 自定义样式 --> <style> .layer-popup { display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .3); z-index: 9999; } </style> <!-- 弹窗 HTML 结构 --> <div class="layer-popup"> <div class="layer-popup-title">弹窗标题</div> <div class="layer-popup-content">弹窗内容</div> <div class="layer-popup-buttons"> <button class="layer-popup-ok">确定</button> <button class="layer-popup-cancel">取消</button> </div> </div> <!-- 弹窗脚本代码 --> <script> function layerPopup(title, content, okCallback, cancelCallback) { // 创建 layer 弹窗 var $popup = $('.layer-popup'); $popup.find('.layer-popup-title').text(title); $popup.find('.layer-popup-content').html(content); $popup.show(); // 绑定按钮事件 $popup.find('.layer-popup-ok').click(function() { $popup.hide(); if (okCallback) { okCallback(); } }); $popup.find('.layer-popup-cancel').click(function() { $popup.hide(); if (cancelCallback) { cancelCallback(); } }); } </script> ``` 使用时,可以调用 `layerPopup` 函数弹出弹窗,例如: ```javascript layerPopup('提示', '确定要删除吗?', function() { // 点击确定按钮后的回调函数 console.log('点击了确定按钮'); }, function() { // 点击取消按钮后的回调函数 console.log('点击了取消按钮'); }); ``` 在实际应用中,需要根据具体的需求进行调整和优化,例如添加更多的样式和选项,支持异步操作等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值