jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能。分享给大家供大家参考，具体如下：

弹出层：两种方式

一是打开网页就自动弹出层二是点击弹出

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title www .JB 51。net-jQuery简便实现遮罩层/title meta charset=' utf-8 '样式正文{ font-family : Arial，Helvetica，无衬线；font-size :12 pxmargin :0 } # main { height :1800 pxpadding-top :90 px；文本对齐：居中；} #全BG {底色：灰色；向左left:0opacity:0.8位置：绝对；top:0z索引：3;filter:alpha(不透明度=80);-moz-opa市33600.5；-khtml-opa市33600.5；} #对话框{底色： # fffborder:5px固体rgba(0，0，0，0.8)；高度：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文本装饰：无；}/style脚本类型=' text/JavaScript ' src=' http : jquery/jquery-1。10 .2 .量滴js '/script脚本$(文档)。ready(function(){ ShowBG()；});/script脚本类型=' 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()；}/script/head dydiv id=' main ' a href=' JavaScript 3:应该是BG()；rel='外部' nofollow '点击这里查看效果/adiv id=' full BG '/div div id=' dialog ' p class=' close ' a href=' # ' rel=' external no follow ' onclick=' closeBg()；'关闭/a/p分区正在加载，请稍后./div/div/div/body/html运行效果：

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery窗口操作技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。