不灭的焱

革命尚未成功,同志仍须努力

作者:php-note.com  发布于:2020-06-20 18:44  分类:HTML/CSS/JS  编辑

在线手册:http://php-note.com/doc/layer/
源码地址:https://github.com/sentsin/layer


一、iframe 内页 关闭自身弹框

Layui 内置方法:layer.getFrameIndex(获取特定iframe层的索引)

此方法一般用于在iframe内页关闭自身时用到:

// 假设这是iframe页
var index = parent.layer.getFrameIndex(window.name); // 先得到当前iframe层的索引
parent.layer.close(index); // 再执行关闭       

二、iframe 弹框关闭前,给父页面传值

parent.$('#parentIframe').text('我被改变了');

三、让 iframe 弹框 高度自适应调整

 parent.layer.iframeAuto(index);

四、让 父页面再弹出一个层

parent.layer.msg('Hi, man', {shade: 0.3})

五、弹框中,再弹框,并把结果汇总到父弹框

参考代码如下:

<input type="hidden" name="repairPId" id="repairPId" value="0" />
<input type="text" name="repairName" id="repairName" class="col-xs-12" />

<script>
    $('#repairName').on('click', function () {
        parent.layer.open({
            type: 2,
            area: ['500px', '450px'],
            btn: ['确定', '取消'],
            fixed: false,
            title: false,
            btnAlign: 'c',
            closeBtn: 0,
            content: "http://test.matechstone.com/v2/afterSale/shipped/shipped",
            yes: function (index) {
                var shipped = parent.layer.getChildFrame('.freeze-table-shipped .table_check_item', index);
                var ids, names, val = '';
                shipped.each(function () {
                    if (this.checked) {
                        val = this.value.split("|");
                        ids = val[0];
                        names = val[1];
                    }
                });

                $("#repairName").val(names);
                $("#repairPId").val(ids);
                parent.layer.close(index);
            },

        });
    });
</script>

 

 


简单封装一下:

/******************************************
 * Layer弹框 
 ******************************************/

// Layer对象
var _layer = parent.layer ? parent.layer : layer;

/**
 * 消息弹框
 * 
 * @param msg 消息语
 * @param time 时间,单位:秒
 */
function dialog_msg(msg, time) {
    var _time = time ? time : 3;
    _layer.msg(msg, {time : _time * 1000, shade: 0.3});
}

/**
 * 显示 成功消息弹框
 * 
 * @param msg 消息语
 * @param time 时间,单位:秒
 */
function dialog_success(msg, time) {
    var _time = time ? time : 3;
    _layer.msg(msg, {time : _time * 1000, icon: 1, shade: 0.3});
}

/**
 * 显示 失败消息弹框
 *
 * @param msg 消息语
 * @param time 时间,单位:秒
 */
function dialog_fail(msg, time) {
    var _time = time ? time : 3;
    _layer.msg(msg, {time : _time * 1000, icon: 2, shade: 0.3});
}

/**
 * Iframe弹框
 * 
 * @param title 标题
 * @param url 网址
 * @param width 宽度:300
 * @param height 高度:500
 * @param scrollbar 是否显示滚动条:true/false
 */
function dialog_open(title, url, width, height, scrollbar) {
    var _width = (width ? width : 500) + 'px';
    var _height = (height ? height : 300) + 'px';
    var _content = scrollbar ? url :[url, 'no'];
    
    _layer.open({
        type: 2,
        title: title,
        shadeClose: false,
        shade: 0.3,
        maxmin: true,
        area: [_width, _height],
        content: _content
    });
}

function dialog_confirm(msg, yesCallback, noCallback) {
    _layer.confirm(msg, {
        btn: ['确定', '取消']
    }, function(index){
        if (yesCallback) {
            yesCallback();
        }
        _layer.close(index);
    }, function(){
        if (noCallback) {
            noCallback();
        }
    });
}

/**
 * Layui的iframe内页 关闭自身弹框
 * http://php-note.com/article/1789.html
 */
function dialog_close() {
    var index = _layer.getFrameIndex(window.name);
    _layer.close(index);
}

 

 

参考:https://layer.layui.com/