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、执行效果:
     
     
     
  • 相关阅读:
    如果你的领导是力量型,你在汇报工作时应该注意()。
    项目管理的10项原则
    扑克k,你知道的人物吗?
    搭建属于您自己的软件版本控制
    Android保持屏幕常亮的方法
    BMP图像数据格式详解
    Android终止线程的方法
    使用ContentProvider访问其他应用的SharedPreferences数据
    android gps定位LocationManager
    Android属性之build.prop生成过程分析
  • 原文地址:https://www.cnblogs.com/zhaow/p/9753836.html
Copyright © 2011-2022 走看看