layer.open弹出层应用示例

1、定义一个静态页,里面存放需要的HTML,如FlightBookChildInsur.html
在这个页面定义执行函数,用来返回数据;
function callbackdata() {
    var passengerName = $("#passenger_Name2").val();
    var passengerCertificate = $("#passenger_Certificate2").val();
    var passengerCertificateNum = $("#passenger_CertificateNum2").val();
    var passengerBirthday = $("#passenger_Birthday2").val();
    var passengerSex = $("#passenger_Sex2").val();
    var obj = { "Name": passengerName, "Certificate": passengerCertificate, "CertificateNum": passengerCertificateNum, "Birthday": passengerBirthday, "Sex": passengerSex };
    return JSON.stringify(obj);
}

2、在父页面定义调用方法,如:
function SetChildInsurMsg(dataIndex) {
    layer.open({
        type: 2, //因为layer弹出层需要一个页面,所以是iframe弹出层,因此type: 2。
        title: "设置投保人",
        shadeClose: true,
        shade: 0.4,
        area: ['60%', '40%'],
        content: "FlightBookChildInsur.html",
        btn: ['确定', '关闭'],
        yes: function (index) {
            var res = window["layui-layer-iframe" + index].callbackdata();
            var obj = JSON.parse(res);
            var passengerName = obj.Name;
            var passengerCertificate = obj.Certificate;
            var passengerCertificateNum = obj.CertificateNum;
            var passengerBirthday = obj.Birthday;
            var passengerSex = obj.Sex;
            if (passengerName.length > 0 && passengerCertificateNum.length > 0 && passengerBirthday.length > 0 && parseInt(passengerSex)>0) {
                
                layer.close(index);
            }
            else {
                layer.alert('请填写必输项。', {
                    skin: 'layui-layer-molv',
                    closeBtn: 0
                });
            }   
        },
        cancel: function () {
            //右上角关闭回调
        }
    });
}

3、执行效果:
 
 
 
原文地址:https://www.cnblogs.com/zhaow/p/9753836.html