/** * 产生长度为32的Guid字符串 */ function getGuid32() { var rt_str = String.fromCharCode(65 + Math.floor(Math.random() * 26)); for (i = 0; i < 31; ++i) { var num = Math.floor(Math.random() * (26 + 26 + 10)); var ch_str; if (num < 10) { ch_str = num.toString(); } else if (num < 10 + 26) { ch_str = String.fromCharCode(65 + num - 10); } else { ch_str = String.fromCharCode(97 + num - 10 - 26); } rt_str += ch_str; } return rt_str; } /** * 根据guid删除alert-div元素 * @param Id guid */ function delAlertDivById(Id) { //等待layer自动处理好 setTimeout(function () { var $alert_div = $(".alert-div[data-guid='" + Id + "']"); if ($alert_div.length == 0) { clearInterval(id); } else { $alert_div.remove(); } }, 1200); //上面这个延时数值很重要,因为layer没提供close的回调,所以只能如此等待 } /** * 关闭弹层相关的清理工作 * @param that myAlert对象 */ function closeWork(that) { clearTimeout(that.autoCloseTimerId); layer.close(that.winId); delAlertDivById(that.uniqueId); } /** * 根据myAlert对象组件出jQuery弹窗对象 * @param that myAlert对象 */ function buildPopup(that) { var baseHtmlStr = "\ <div class='alert-div'>\ <div class='title'>\ <i class='fa icon'></i>\ <span class='text'></span>\ <i class='fa fa-close icon-close'></i>\ </div>\ <div class='content text-center'>\ <i class='fa fa-5x icon'></i>\ <span class='text1'></span>\ <span class='text2'></span>\ </div>\ <div class='control text-center'>\ <div class='btn btn-base'></div>\ </div>\ </div>\ "; var $baseJq = $(baseHtmlStr); $baseJq.attr("data-guid", that.uniqueId); $baseJq.children(".title").children(".icon").addClass(that.titleIcon); $baseJq.children(".content").children(".icon").addClass(that.contentIcon); $baseJq.children(".title").children(".text").text(that.title); $baseJq.children(".content").children(".text1").text(that.text); $baseJq.children(".content").children(".text2").text(that.summary); $baseJq.children(".control").children(".btn-base").text(that.okBtnText); $baseJq.children(".title").children(".icon-close").click(that.canClose ? that.closeBtnFunction : function () { }); $baseJq.children(".control").children(".btn-base").click(that.okBtnFunction); return $baseJq; } /** * 根据配置对象对于myAlert对象进行配置 * @param dstObj 目标对象,myAlert对象 * @param cfgObj 配置对象 */ function defaultConfig(dstObj, cfgObj) { if (cfgObj == undefined) { cfgObj = new Object(); } dstObj.uniqueId = cfgObj.uniqueId || getGuid32(); dstObj.title = cfgObj.title || "提示"; dstObj.text = cfgObj.text || "确认?"; dstObj.summary = cfgObj.summary || "确认请按下方按钮"; dstObj.okBtnText = cfgObj.okBtnText || "确认"; dstObj.titleIcon = cfgObj.titleIcon || "fa-info-circle"; dstObj.contentIcon = cfgObj.contentIcon || "fa-exclamation-circle"; if (cfgObj.canClose == undefined) { dstObj.canClose = true; } else { dstObj.canClose = cfgObj.canClose; } dstObj.autoCloseTimer = cfgObj.autoCloseTimer || -1; dstObj.okBtnFunction = cfgObj.okBtnFunction || function () { closeWork(dstObj); }; dstObj.closeBtnFunction = cfgObj.closeBtnFunction || function () { closeWork(dstObj); }; dstObj.autoCloseTimerId = -1; dstObj.autoCloseFunction = cfgObj.autoCloseFunction || function () { closeWork(dstObj); }; //存储layer返回的弹层id dstObj.winId = -1; } /** * myAlert对象构造函数 * @param cfgObj myAlert配置对象 */ function myAlert(cfgObj) { defaultConfig(this, cfgObj); //弹出弹层方法 this.show = function () { if ($(".alert-div[data-guid='" + this.uniqueId + "']").length > 0) { return; } var $baseJq = buildPopup(this); $("body").append($baseJq); /** * 实际弹窗部分 */ var $popup_dom = $baseJq; this.winId = layer.open({ id: this.uniqueId, type: 1, closeBtn: 0, title: false, content: $popup_dom, area: [$popup_dom.width(), $popup_dom.height()] }); if (this.canClose) { if (this.autoCloseTimer > -1) { var that = this; this.autoCloseTimerId = setTimeout(function () { that.autoCloseFunction(); }, this.autoCloseTimer); } } }; }
.layui-layer { background-color: rgba(255, 255, 255, 0) !important; } .alert-div { position: relative; width: 740px; height: 480px; border: 1px solid #f2af6f; border-radius: 6px; font-family: 'Microsoft YaHei UI'; margin: 0px; padding: 0px; background-color: white; overflow-y: hidden; overflow-x: hidden; display: none; } .alert-div .title { background: linear-gradient(to bottom, #f2af6f 10%, #f3a02c 90%); font-size: 48px; height: 70px; } .alert-div .title .icon { margin: 0px 0px 10px 14px; } .alert-div .title .text { position: absolute; top: 9px; left: 67px; font-size: 34px; font-weight: bold; } .alert-div .title .icon-close { margin: 8px 12px 10px 14px; float: right; } .alert-div .content { height: 270px; padding-top: 50px; } .alert-div .content .icon { display: block; } .alert-div .content .text1 { color: black; font-size: 38px; margin-top: 40px; display: block; } .alert-div .content .text2 { color: #444; font-size: 24px; margin-top: 10px; display: block; } .alert-div .control { height: 140px; } .alert-div .control .btn-base { border: solid 1px #f2af6f; border-radius: 6px; font-size: 36px; font-weight: bold; padding-left: 40px; padding-right: 40px; margin-top: 35px; background: linear-gradient(to bottom, #f2af6f 10%, #f3a02c 90%); }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="Content/bootstrap.css" /> <link rel="stylesheet" href="Content/font-awesome.css" /> <link rel="stylesheet" href="layer/skin/default/layer.css" /> <link rel="stylesheet" href="Content/trml-myAlert.css" /> </head> <body> <div class="container" style="margin-top: 20px;"> <input type="button" class="btn btn-primary btn-test1" value="测试1" /> </div> <script src="Scripts/jquery-3.1.1.js"></script> <script src="Scripts/bootstrap.js"></script> <script src="layer/layer.js"></script> <script src="Scripts/trml-myAlert-jq.js"></script> <script> $(".btn-test1").click(function () { var tstAlert = new myAlert({ uniqueId: "gushihao", okBtnFunction: function () { alert("哈哈"); closeWork(tstAlert); }, autoCloseTimer: 10000, autoCloseFunction: function () { alert("我要自动关闭了!"); closeWork(tstAlert); }, closeBtnFunction: function () { alert("你点击了关闭按钮"); closeWork(tstAlert); } }); tstAlert.show(); }); </script> </body> </html>