Layer.js彈層的一些簡單的使用

//-----------這里只是簡單的做一下記錄，沒有封裝，作為筆記防止忘記了

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



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




  function member_edit(id, username, nickname, sex, phone, email, address, start) {          
            layer.open({
                type: 1,
                title: '修改用戶信息',
                maxmin: true,
                shadeClose: false, //點擊遮罩關閉層
                area: ['800px', ''],
                content: $('#add_menber_style'),
                btn: ['提交', '取消'],
                yes: function (index, layero) {
                    var num = 0;
                    var str = "";                 
                    if (num > 0) { return false; }
                    else {
                        layer.alert('保存成功！', {
                            title: '提示框',
                            icon: 1,
                        });
                        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: 0;
            _display: none;
        }



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

 function kefu() {
            var mwidth = $(window).width();
            var mheight = $(window).height();
            layer.open({
                type: 2,
                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(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }




//-----封裝 layer的彈出層

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

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


//----Layer彈出層

   var lis = $("div.footer>ul>li");
            lis.eq(0).click(function () {
                top.layer.alert("1:Q米可在下單時候用於抵扣訂單款。<br/>2:1Q米=1RMB。", {
                    area: ['320px', 'auto'],//設置一下寬度，會自動給居中
                    time: 20000,
                    btn: false,
                    title: ['Q米可以做什么?', 'background-color: #00bb9d;text-align:center;font-size:18px;']
                });
            })




//----layer彈出層的 icon  

       top.layer.msg("加載中....", { time: 3000, icon: 1 })//對的V
                top.layer.msg("加載中....", { time: 3000, icon: 2 })//錯誤的X
                top.layer.msg("加載中....", { time: 3000, icon: 3 })//?
                top.layer.msg("加載中....", { time: 3000, icon: 4 })//一把鎖
                top.layer.msg("加載中....", { time: 3000, icon: 5 })//不高興的臉
                top.layer.msg("加載中....", { time: 3000, icon: 6 })//笑臉！
                top.layer.msg("加載中....", { time: 3000, icon: 7 })//感嘆號！


//---------layer.msg 背景顏色為透明

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

///-------
$('#sayHello').click(function () {  
        top.layer.open({  
            id: "layer_say_hello",  
            type: 2,  
            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")[0].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: 1,//--------------------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: 2000, //2s后自動關閉
  btn: ['明白了', '知道了', '哦']
});



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


      function regout() {
            layer.confirm("確認要注銷賬戶？", { icon: 3, 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: 1 }, function () { window.location.href = "/login.aspx";});
                    }
                    else {
                        layer.msg("注銷失敗", { icon: 2 }, function () { });
                    }
                },
                error: function () {
                    layer.msg("注銷失敗", { icon: 2 }, function () { });
                }
            });
        }


//----彈出並ajax,並有回調
  function regout() {
            layer.confirm("確認要注銷賬戶？", { icon: 3, title: '賬戶注銷提示',
            content: "賬戶注銷后，你已完成的交易將無法處理售后，所有賬戶信息將會清除", 
            btn: ['確定注銷', '取消注銷'] }, function (r) {
                layer.closeAll();

                layer.open({
                    type: 2,
                    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: 3, title: '賬戶注銷提示', 
            content: "賬戶注銷后，你已完成的交易將無法處理售后，所有賬戶信息將會清除",
            btn: ['確定注銷', '取消注銷'] }, function (r) {
                layer.closeAll();

                layer.open({
                    type: 2,
                    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() == "1") {//默認加載為：0 為一個隱藏域中，由上面子窗口來賦值
                                doUserExitLock();
                            } else {
                               layer.alert("注銷操作取消或者失敗！", { icon: 2 });
                            }                                                                                                                                                   
                        }
                    }
                });
            });
       }
        //注銷操作
        function doUserExitLock() {
            $.ajax({
        .........
        })
    }