Layer.js弹层的一些简单的使用

//-----------这里只是简单的做一下记录，没有封装，作为笔记防止忘记了

//----contentMsg 里面是可以传入 HTML代码的
   top.layer.alert(contentMsg, {
                    area: [(_width - ) + 'px', 'auto'],
                    time: ,
                    btn: false,
                    title: [title, 'background-color: #00bb9d;text-align:center;font-size:18px;']
                });

//---Layer.confirm
      layer.confirm('确定要发送消息来提醒客服付款吗？', { icon: , title: '提示' }, function (index) {
                    //do something
                  layer.msg("ok");
          })

  function member_edit(id, username, nickname, sex, phone, email, address, start) {
            layer.open({
                type: ,
                title: '修改用户信息',
                maxmin: true,
                shadeClose: false, //点击遮罩关闭层
                area: ['800px', ''],
                content: $('#add_menber_style'),
                btn: ['提交', '取消'],
                yes: function (index, layero) {
                    var num = ;
                    var str = "";
                    if (num > ) { return false; }
                    else {
                        layer.alert('保存成功！', {
                            title: '提示框',
                            icon: ,
                        });
                        layer.close(index);
                    }
                }
            });
        }

//----layui  的时间控件的使用  laydate

  <label class="l_f">开始时间：</label><input class="inline laydate-icon" id="startTime" name="startTime"  placeholder="yyyy-MM-dd"  style="margin-left: 6px;"></li>
  <label class="l_f">开始时间：</label><input class="inline laydate-icon" id="endtime" name="endtime"  placeholder="yyyy-MM-dd"  style="margin-left: 6px;"></li>

  <link href="/Content/layui/css/layui.css" rel="stylesheet" />
    <script src="/Content/layui/layui.js"></script>
    <script type="text/javascript">
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#startTime' //指定元素
            });
            laydate.render({
                elem: '#endtime' //指定元素
            });
        });
    </script>

//---layer.js弹出层的关闭按钮调整位置
   .layui-layer-setwin .layui-layer-close2 {
            position: absolute;
            right: -14px !important;
            top: -14px !important;
            width: 30px;
            height: 45px;
            margin-left: ;
            _display: none;
        }

//----在js中获取URL地址上的id    value

 function kefu() {
            var mwidth = $(window).width();
            var mheight = $(window).height();
            layer.open({
                type: ,
                area: ['' + mwidth + 'px', '' + mheight + 'px'],
                title: "在线咨询",
                maxmin: true,
                content: "/kfbox.aspx?pid=" + GetQueryString("id")//-----获取id
            });
        }

    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr().match(reg);
        if (r != null) return unescape(r[]); return null;
    }

//-----封装 layer的弹出层

 <script type="text/javascript">
        var _width ;
        $(function () {
            initTop6img();
            _width = $(window).width();
            var lis = $("div.footer>ul>li");
            showGitfInfoMsg(lis.eq(),
    '华豆可以做什么?',
    "1:华豆可在下单时候用于抵扣订单款。<br/>2:1华豆=1RMB。");
        })

        function showGitfInfoMsg(obj, title, contentMsg) {
            obj.click(function () {
                top.layer.alert(contentMsg, {
                    area: [(_width - ) + 'px', 'auto'],
                    time: ,
                    btn: false,
                    title: [title, 'background-color: #00bb9d;text-align:center;font-size:18px;']
                });
            })
        }
     }

//----Layer弹出层

   var lis = $("div.footer>ul>li");
            lis.eq().click(function () {
                top.layer.alert("1:Q米可在下单时候用于抵扣订单款。<br/>2:1Q米=1RMB。", {
                    area: ['320px', 'auto'],//设置一下宽度，会自动给居中
                    time: ,
                    btn: false,
                    title: ['Q米可以做什么?', 'background-color: #00bb9d;text-align:center;font-size:18px;']
                });
            })

//----layer弹出层的 icon  

       top.layer.msg("加载中....", { time: , icon:  })//对的V
                top.layer.msg("加载中....", { time: , icon:  })//错误的X
                top.layer.msg("加载中....", { time: , icon:  })//?
                top.layer.msg("加载中....", { time: , icon:  })//一把锁
                top.layer.msg("加载中....", { time: , icon:  })//不高兴的脸
                top.layer.msg("加载中....", { time: , icon:  })//笑脸！
                top.layer.msg("加载中....", { time: , icon:  })//感叹号！

//---------layer.msg 背景颜色为透明

    top.layer.msg("努力加载中....", { time: , icon: , shade: [0.8, '#393D49'] });

///-------
$('#sayHello').click(function () {
        top.layer.open({
            id: "layer_say_hello",
            type: ,
            title: '打招呼',
            shadeClose: true,
            shade: 0.8,
            area: ['500px', '400px'],
            content: '/Findfriend/Part_SayHello', //iframe的url
            success: function (layero, index) {
                var her_uli_id = $("#headico").attr("data-uli-id"); //headico 是 HomeFrame的元素
                var her_nickname = $("#nickname").text();   //nickname 是 HomeFrame的元素
                // layero.find("iframe")        找到iframe的jquery对象
                // layero.find("iframe")[0]     将jqeruy对象转化为Dom对象
                // contentWindow                获取当前 iframe 的 内容 window对象（Dom对象）
                //.send-hello 是 LayerFrame 的元素
                var jquerySendHelloButton = $(".send-hello", layero.find("iframe")[].contentWindow.document);
                jquerySendHelloButton.attr("data-her-uli-id", her_uli_id);
                jquerySendHelloButton.attr("data-her-nick-name", her_nickname);
            }
        });
    })  

//---Layer只加载 form id为fmupdate里面的内容

       top.layer.open({
                            type: ,//--------------------content: 本地的东东需要设置为1， 其他的页面 需要设置为2
                            title: ['修改抽奖活动信息', 'background-color: #00bb9d;text-align:center;font-size:18px;'],
                            shadeClose: true,
                            shade: false,
                            maxmin: true,
                            area: ['630px', '400px'],
                            content: $("#fmupdate").html(),
                            end: function () {//关闭弹出层之后的回调
                                //alert("ok,现在开始注销")
                            }
                        });

layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
  time: , //2s后自动关闭
  btn: ['明白了', '知道了', '哦']
});

 layer.alert("未获取地址", { icon:  });

      function regout() {
            layer.confirm("确认要注销账户？", { icon: , title: '账户注销提示',
            content: "账户注销后，你已完成的交易将无法处理售后，所有账户信息将会清除",
            btn: ['确定注销', '取消注销'] }, function (r) {
                if (r) {
                    doUserExitLock();
                }
            });
        }
        function doUserExitLock() {
            $.ajax({
                url: "/ashx/accountexit.ashx?k="+Math.random(),
                dataType: "Text",
                data: {},
                success: function (rlt) {
                    if (rlt == "OK") {
                        layer.msg("注销成功", { icon:  }, function () { window.location.href = "/login.aspx";});
                    }
                    else {
                        layer.msg("注销失败", { icon:  }, function () { });
                    }
                },
                error: function () {
                    layer.msg("注销失败", { icon:  }, function () { });
                }
            });
        }

//----弹出并ajax,并有回调
  function regout() {
            layer.confirm("确认要注销账户？", { icon: , title: '账户注销提示',
            content: "账户注销后，你已完成的交易将无法处理售后，所有账户信息将会清除",
            btn: ['确定注销', '取消注销'] }, function (r) {
                layer.closeAll();

                layer.open({
                    type: ,
                    title: ['导入信息', 'background-color: #00bb9d;text-align:center;font-size:18px;'],
                    shadeClose: true,
                    shade: false,
                    maxmin: true,
                    area: ['330px', '500px'],
                    content: 'AjaxUserLock_cause.aspx',
                    end: function () {//关闭弹出层之后的回调
                        alert("ok,现在开始注销")
                    }
                });
                //if (r) {
                //    doUserExitLock();
                //}
            });
        }

//-----父窗口弹出，并有子窗口传来的值
  function regout() {
            layer.confirm("确认要注销账户？", { icon: , title: '账户注销提示',
            content: "账户注销后，你已完成的交易将无法处理售后，所有账户信息将会清除",
            btn: ['确定注销', '取消注销'] }, function (r) {
                layer.closeAll();

                layer.open({
                    type: ,
                    title: ['导入信息', 'background-color: #00bb9d;text-align:center;font-size:18px;'],
                    shadeClose: true,
                    shade: false,
                    maxmin: true,
                    area: ['330px', '460px'],//如果不是 iframe
                    content: 'AjaxUserLock_cause.aspx',
                    end: function () {//关闭弹出层之后的回调
                        if (r) {
    　　　　　　　　　　　　　　//--parent.window.document.getElementById("hideflag").value = "1";

                            if ($("#hideflag").val() == "") {//默认加载为：0 为一个隐藏域中，由上面子窗口来赋值
                                doUserExitLock();
                            } else {
                               layer.alert("注销操作取消或者失败！", { icon:  });
                            }
                        }
                    }
                });
            });
       }
        //注销操作
        function doUserExitLock() {
            $.ajax({
        .........
        })
    }