jQuery DIV弹出效果实现代码

先上个效果图，可以点击关闭按钮或是在遮罩层上任意处点击，就可以关闭弹出层

超文本标记语言代码复制代码代码如下： div id=' pop-div ' style=' width : 300 px ' class=' pop-box ' H4标题位置/h4 div class='pop-box-body' p正文内容/p/div class='按钮面板' style=' text-align : right ' style=' text-align : right '输入值=' Close ' id=' BTN 1 ' onclick=' hideDiv '(' pop-div ')；type=' button '/div/div代码很简洁。最外层是一个大的差异作为弹出层的容器，H4作为弹出层的标题，又一个差异用于弹出层正文内容显示，再一个差异用于放置一些按钮CSS。代码复制代码代码如下：弹出框{ z-index : 9999/*这个数值要足够大，才能够显示在最上层*/边距-底部： 3px显示器：无；绝对位置：背景： # FFF；边框：实心1px # 6e 8 bde} .流行盒子H4 { color : # FFF；光标：默认高度： 18pxfont-size : 14px字体粗细：加粗；文本-左对齐：左填充left : 8pxpadding-top : 4px；填充-底部： 2px背景： url('./images/header _ BG。gif ')重复-x 0 0；} .弹出盒体{ clear:双双；margin : 4 xpadding : 2px } JS代码复制代码代码如下：函数Popupdiv(div _ id){ var div _ obj=$(' # ' div _ id)；var窗口宽度=文档。文档元素。客户端宽度；var窗口高度=文档。文档元素。客户身高；var Popupheight=div _ obj。高度()；var Popupwidth=div _ obj。宽度()；//添加并显示遮罩层$('div id='mask'/div ').addClass(')掩码')。宽度(窗口宽度* 0.99).高度(窗口高度* 0.99).click(function(){ HideDiv(div _ id))；}) .appendTo("正文")。法丁(200);div _ obj。CSS({ ' position ' : ' absolute ' }).动画({左窗宽：/2-Popupwidth/2，顶窗高：/2-PopuPhight/2，opacity: ' show ' }，' slow ')；}函数hideDiv(div_id) { $('#mask ').移除();$("#"div _ id).动画({left: 0，top: 0，opacity: ' hide ' }，' slow ')；}