自定义弹出层示例:
标题: 内容: 自动关闭时间:
///自定义弹出层 alertTitle:弹出层标题 alertContent:弹出层内容 autoCloseSecond:弹出层默认自动关闭时间,默认3秒 contaierId:弹出层所在容易的ID,默认为body jQuery.extend({ showAlertBox: function (alertTitle, alertContent, autoCloseSecond, contaierId) { stopTime(); //停止自动关闭弹出层的方法 $("#alterBox").remove(); //移除已存在的弹出层 if (contaierId == "" || contaierId == undefined || contaierId == null) contaierId = "body"; if (alertTitle == "" || alertTitle == undefined || alertTitle == null) alertTitle = "提示信息"; if (alertContent == "" || alertContent == undefined || alertContent == null) alertContent = "提示信息"; if (autoCloseSecond == "" || autoCloseSecond == undefined || autoCloseSecond == null || isNaN(autoCloseSecond) || parseInt(autoCloseSecond) < 2) autoCloseSecond = 3; var strAlertBoxHtml = "<div id='alterBox' class='lightbox' style=' 180px; background: #FFFFFF; border: 1px solid #ccc;line-height: 25px; z-index: 1001; display: block; position: absolute; top: 40%;left: 50%; margin-left: 0px; margin-top: 0px; display: none;'>"; strAlertBoxHtml += "<dl style='display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em;-webkit-margin-start: 0px; -webkit-margin-end: 0px; margin-top:0px;'>"; strAlertBoxHtml += "<dt id='idBoxHead' style='height: 18px;background: #f4f4f4;padding: 5px;'><strong>" + alertTitle + "</strong>"; strAlertBoxHtml += "<strong id='alertClose' style='float: right;padding-right: 7px; cursor: pointer; font-size:14px;'>X</strong> </dt>"; strAlertBoxHtml += "<dd id='ddContent' style='text-align: center; height: 45px;'>" + alertContent + "</dd></dl></div>"; if (contaierId == "body") { $(contaierId).append(strAlertBoxHtml); } else { $("#" + contaierId).append(strAlertBoxHtml); } //***********************弹出层显示位置 start var containerWidth = 0; //容器可用区域宽度 var containerHeight = 0; //容器可用区域高度 if (contaierId == "body") { containerWidth = window.screen.availWidth; //容器可用区域宽度 containerHeight = window.screen.availHeight; //容器可用区域高度 } else { containerWidth = $("#" + contaierId).width(); containerHeight = $("#" + contaierId).height(); if (containerWidth <= 180 || containerHeight < 45) { //如果容器的大小小于弹出层的大小,自动以body作为容器 containerWidth = window.screen.availWidth; containerHeight = window.screen.availHeight; contaierId = "body"; $("#alterBox").remove(); $(contaierId).append(strAlertBoxHtml); } } var marginLeft = 0; //弹出层距左边边距 var marginTop = 0; //弹出层距上边边距 marginLeft = (parseInt(containerWidth) / 2) - 90; marginTop = (parseInt(containerHeight) / 2) - 50; $("#alterBox").css({ "left": marginLeft, "top": marginTop }); //***********************弹出层显示位置 end $("#alterBox").show(); //显示弹出层 $("#alertClose").click(function () { $("#alterBox").remove(); }); //关闭弹出层事件 //*************************自动关闭弹出层 start getRTime(parseInt(autoCloseSecond)); var setTime; function getRTime(m) { //倒计时 m--; if (m < 1) { stopTime(); $("#alterBox").remove(); return false; } setTime = setTimeout(function () { getRTime(m); }, 1000); } function stopTime()//停止之前的倒计时 { clearTimeout(setTime); //停止之前的倒计时 } //*************************自动关闭弹出层 end } });
其他地方引用示例:
$.showAlertBox("提示","这里是提示信息!",5,"contains_Id"); //弹出层在 id=“contains_Id”的容器中显示,如果该参数为空,则在body中显示,5秒后自动关闭弹出层