zoukankan      html  css  js  c++  java
  • 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、执行效果:
     
     
     
  • 相关阅读:
    ptunnel-简易使用
    socat-简易使用
    ncat-相关参数用法
    通过iodine简单实现dns隧道技术
    HTB-靶机-Safe
    HTB-靶机-Rope
    【mysql子查询&组合查询 05】
    【mysql 库表操作 07】
    【mysql插入&修改&删除 06】
    【mysql 连接查询 04】
  • 原文地址:https://www.cnblogs.com/zhaow/p/9753836.html
Copyright © 2011-2022 走看看