<style type="text/css"> #fullbg { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: gray; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .dialog { display: none; position: absolute; overflow: auto; } </style>
function showBg(content) { $("#fullbg").css({ width : $(document).width(), height : $(document).height(), display : 'block' }); var objWH = getObjWh(content); var tbT = objWH.split("|")[0] + "px"; var tbL = objWH.split("|")[1] + "px"; $("#"+content).css({ top : tbT, left : tbL, display : 'block' }); $(window).scroll(function() { resetBg(content) }); $(window).resize(function() { resetBg(content) }); } function getObjWh(obj) { var st = $(document).scrollTop();//滚动条距顶部的距离 ); var sl = $(document).scrollLeft();//滚动条距左边的距离 var ch = $(window).height()//浏览器时下窗口可视区域高度 var cw = $(window).width()//浏览器时下窗口可视区域宽度 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(dialog) { var fullbg = $("#fullbg").css("display"); if (fullbg == "block") { var bH2 = $(document).height(); var bW2 = $(document).width(); $("#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(dialog) { $("#fullbg").hide(); $("#"+dialog).hide(); }
<!-- z-index大的div覆盖在z-index小的div上 -->
<!-- 遮罩层 -->
<div id="fullbg"></div>
<!-- 弹出层 -->
<div id="code_get" class="dialog" style="z-index:1002;"></div>