jQuery弹层提示效果

这段代码是我根据网上的一些示例代码加以变形后产生的,按照这个方法可以实现弹层提示的效果,同时实现了覆盖原有的层的效果。各位有需要的话可以按情况改变提示层的样式以适应各自的需求。调用时可以这么写: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标签

jQuery弹层提示效果,布布扣,bubuko.com

jQuery弹层提示效果

上一篇:Stack-based buffer overflow in acdb audio driver (CVE-2013-2597)


下一篇:ORACLE错误1033出现和ORA-00600错误解决办法