本文通过一个例子说明jQuery可以弹出一个带有蒙版层的浮动窗口。分享给大家参考，如下：

！doctype html html lang=' en ' hearta charset=' UTF-8 ' title pop window/title style * { padd : 0；保证金： 0；}.隐藏{ display:无}。pop window { width : 300 pxheart : 300 pxbackground : # abcdefpadd : 2pxmargin 3360 10px绝对位置：左： 0；top : 0；z-index : 2；}.popWindow h3 { height: 30px线高： 30px}.弹出窗口H3跨度{ float : rightfont-size : 14px字体粗细：正常；光标：指针；}.弹出窗口H3 span :悬停{ color : # f00}.popWindow .内容{高： 270像素背景# fff}。屏蔽{ background : # 000 opa city 3360 0.4绝对位置：左： 0；top : 0；z-index : 1；}/style/head body style=' width :2000 px ' a href=' JavaScript :'id='show '显示窗口/ABR/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/弹出窗口的标题跨度关闭/span/h3div class='content '弹出窗口的内容/div/div脚本src=' http : jquery-1。7 .2 .量滴js '/script script $(function(){ var oBtn=$(' # show ')；var popWindow=$(' .弹出窗口’)；var oClose=$(' .弹出窗口H3跨度’)；//浏览器可视区域的宽度var browserWidth=$(窗口)。宽度();//浏览器可视区域的高度var browserHeight=$(窗口)。高度();//浏览器纵向滚动条距离上边界的值var browserScrollTop=$(窗口)。滚动顶部()；//浏览器横向滚动条距离左边界的值var browserScrollLeft=$(window).scrolleft()；//弹出窗口的宽度var popWindowWidth=popwindow。out width(true)；//弹出窗口的高度var popWindowHeight=popwindow。outhealth(真)；//左侧的值=浏览器可视区域的宽度/2-弹出窗口的宽度/2 浏览器横向滚动条距离左边界的值var positionLeft=browserWidth/2-popWindowWidth/2 browserrolleft；//顶部的值=浏览器可视区域的高度/2-弹出窗口的高度/2 浏览器纵向滚动条距离上边界的值var positionTop=browser heart/2-popWindowHeight/2 browser roll top；var Omask=' div class=' mask '/div '//遮照层的宽度var maskWidth=$(文档)。宽度();//遮照层的高度var掩码hA8=$(文档)。高度();奥宾。单击(function(){ popwindow。show().动画({ 'left':positionLeft 'px '，' top':positionTop 'px' }，500)；$(“正文”).追加(Omask)；$('.面具')。宽度(马斯克怀德思).身高(掩膜Hg8)；});$(窗口)。resize(function(){ if(popwindow。是(' :可见'){ browserWidth=$(window)).宽度();browserHeight=$(窗口)。高度();position left=browserWidth/2-popWindowWidth/2 browserrolleft；position top=browser heart/2-popWindowHeight/2 browser roll top；弹出窗口。动画({ ' left ' : position left ' px '，' top':positionTop 'px' }，500)；} });$(窗口)。scroll(function(){ if(popwindow。是(' :可见'){ browserScrollTop=$(window).滚动顶部()；browserScrollLeft=$(窗口)。scrolleft()；position left=browserWidth/2-popWindowWidth/2 browserrolleft；position top=browser heart/2-popWindowHeight/2 browser roll top；弹出窗口。动画({ ' left ' : position left ' px '，' top':positionTop 'px' }，500).出列();} });奥洛斯。单击(function(){ popwindow。hide()；$('.面具')。移除();});});/脚本/正文/html运行效果图如下：

更多对jQuery感兴趣的读者，请查看本站话题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》。

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