这段代码是我根据网上的一些示例代码加以变形后产生的，按照这个方法可以实现弹层提示的效果，同时实现了覆盖原有的层的效果。各位有需要的话可以按情况改变提示层的样式以适应各自的需求。调用时可以这么写：Page.ClientScript.RegisterStartupScript(Page.GetType(), "myscript", "");
//弹层提示脚本
//显示灰色JS遮罩层
function showBg(ct, content, forShowInfo) {
var bH = $("body").height();
var bW = $("body").width() + 16;
var objWH = getObjWh(ct);
$("#fullbg").css({ width: bW, height: bH, display: "block" });
var tbT = objWH.split("|")[0] + "px";
var tbL = objWH.split("|")[1] + "px";
$("#" + ct).css({ top: tbT, left: tbL, display: "block" });
$("#" + content).html("
" + forShowInfo + "
"); //提示层信息
$(window).scroll(function () { resetBg() });
$(window).resize(function () { resetBg() });
}
function getObjWh(obj) {
var st = document.documentElement.scrollTop; //滚动条距顶部的距离
var sl = document.documentElement.scrollLeft; //滚动条距左边的距离
var ch = document.documentElement.clientHeight; //屏幕的高度
var cw = document.documentElement.clientWidth; //屏幕的宽度
var objH = $("#" + obj).height(); //浮动对象的高度
var objW = $("#" + obj).width(); //浮动对象的宽度
var objT = Number(st) + (Number(ch) - Number(objH)) / 2;
var objL = Number(sl) + (Number(cw) - Number(objW)) / 2;
return objT + "|" + objL;
}
function resetBg() {
var fullbg = $("#fullbg").css("display");
if (fullbg == "block") {
var bH2 = $("body").height();
var bW2 = $("body").width() + 16;
$("#fullbg").css({ width: bW2, height: bH2 });
var objV = getObjWh("dialog");
var tbT = objV.split("|")[0] + "px";
var tbL = objV.split("|")[1] + "px";
$("#dialog").css({ top: tbT, left: tbL });
}
}
//关闭灰色JS遮罩层和操作窗口
function closeBg() {
$("#fullbg").css("display", "none");
$("#dialog").css("display", "none");
}
//倒计时跳转页面
var secs = 5; //倒计时的秒数
var URL;
function Load(url) {
URL = url;
for (var i = secs; i >= 0; i--) {
window.setTimeout('doUpdate(' + i + ')', (secs - i) * 1000);
}
}
function doUpdate(num) {
document.getElementById('timeRedirect').innerHTML = num + ' 秒后将自动跳转';
if (num == 0) { window.location = URL; }
}
/*弹层提示配套的css样式*/
#fullbg
{
background-color: Gray;
display: none;
z-index: 3;
position: absolute;
left: 0px;
top: 0px;
filter: Alpha(Opacity=30); /* IE */
-moz-opacity: 0.4; /* Moz + FF */
opacity: 0.4;
}
#dialog
{
position: absolute;
width: 300px;
height: 100px;
padding-top: 50px;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
background: #6666ff;
display: none;
text-align: center;
z-index: 5;
}
最后是页面中要添加的html标签
