jQuery css html实现页面遮罩弹出框

页面遮罩弹出框是最常见的一种情况，今天用jQuery实现页面遮罩弹出框，主要用的技术有JQuery，css和html，html代码如下：复制代码代码如下： div id=' main ' a href=' JavaScript : short BG()；'点击这里查看效果/a div id='完整BG '/div div id=' dialog ' p class=' close ' a href=' # ' onclick=' closeBg()；'关闭/a/p分区正在加载，请稍后./div /div /div css代码如下：复制代码代码如下： body { font-family : arial，Helvetica，无衬线；font-size :12 pxmargin :0 } # main { height :1800 pxpadding-top :90 px；文本对齐：居中；} #全BG {底色：灰色；左侧left:0opacity:0.5位置：绝对；top:0z索引：3;filter:alpha(不透明度=50);-moz-opa市33600.5；-khtml-opa市33600.5；} #对话框{底色： # fffborder:5px固体rgba(0，0，0，0.4)；高度：400 px左侧：50%;余量：-200 px 0-200 px；padding:1px位置：固定！重要；/* 浮动对话框*/位置：绝对；前：50%；宽度宽度：400像素索引：5;边界半径：5像素；display : none } # dialog p { margin :0 0 12px h8 :24 px线高：24 px背景： # CCCCCC；} #对话框p .关闭{ text-align : right填充-右：10 px} #对话框p。关闭一个{ color: # fff文本装饰：无；} jQuery代码如下：复制代码代码如下：脚本类型=' text/JavaScript '//显示灰色jQuery遮罩层函数showBg() { var bh=$('body ').高度();var bw=$('body ').宽度();$('#fullbg ').css({ height:bh，width:bw，display : ' block ' })；$(“# dialog”).show()；} //关闭灰色jQuery遮罩函数closeBg() { $('#fullbg，#dialog ').hide()；}/脚本大致预览情况：在ie9中预览

在火狐浏览器中预览

在铬中预览