自定义提示信息弹出层

自定义弹出层示例：

标题： 内容： 自动关闭时间：

///自定义弹出层   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='width: 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秒后自动关闭弹出层

// function showAlertBox(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 = "";
strAlertBoxHtml += "";
strAlertBoxHtml += "" + alertTitle + "";
strAlertBoxHtml += "X ";
strAlertBoxHtml += "" + alertContent + "";

if (contaierId == "body") {
$(contaierId).append(strAlertBoxHtml);
} else {
if(("#"+contaierId).lenth<1) { //所指定的容器不存在
$("body").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
}
function _showAlertBox(){
//alert($("#alertboxtitle").val());
var strTitle=$("#alertboxtitle").val();
var strContent=$("#alertboxcontent").val();
var closeTime=$("#alertboxclosetime").val();
showAlertBox(strTitle,strContent,closeTime,'body');
}
// ]]>