jQuery弹层提示效果
浏览数：29 /
时间：2015年06月09日
这段代码是我根据网上的一些示例代码加以变形后产生的，按照这个方法可以实现弹层提示的效果，同时实现了覆盖原有的层的效果。各位有需要的话可以按情况改变提示层的样式以适应各自的需求。调用时可以这么写：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标签
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
