JS实现新浪微博效果带遮罩层的弹出框代码

本文实例讲述了射流研究…实现新浪微博效果带遮罩层的弹出框代码。分享给大家供大家参考。具体如下：

这是一款新浪微博效果的弹出框，现成的射流研究…代码，兼容IE6，以及各主流浏览器。新浪微博弹出层并可拖拽，操作轻松舒适，符合用户的浏览习惯，将代码推荐给各位网友。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-sina-zzxg-dlg-demo/

具体代码如下：

！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 ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title弹出层并可拖拽/titlestylebody，html { height:2000px}body，div，h2 { margin:0划水：0;}车身{ font :12 px/1.5 Tahoma；}居中{ padding-top :10 px；}按钮{ cursor : pointer } # overlay { position : fixed top :0 left :0宽度：100%;高度：100%;背景技术： # 000;opa city 33600.5 filter : alpha(不透明度=50);display : none } * html # overlay { position : absolute；} # win { position : absolutetop :50%；左侧：50%;宽度宽度：400像素高度：200 px背景# fffborder:4px实心# f90 margin :-102 px 0-202 px；display : none } H2 { font-size :12 px；高度：18 pxtext-右对齐：背景# FC0border-bottom:3px实心# f90 padd :5 xcursor : move } H2 span { color : # f90 cursor : pointer指针；背景# fffborder:1px固体# f90 padd :0 2px }/style脚本窗口。onload=function(){ var shit=！-[1, ];var oWin=文档。getelementbyid(' win ')；var oLay=文档。getelementbyid(' overlay ')；var oBtn=文档。getelementsbytagname(' button ')[0]；var oClose=文档。getelementbyid(' close ')；var Oh2=owin。GetElementsBytagname(' H2 ')[0]；var bDrag=false var DIsX=DIsY=0；var isc rollt=文档。文档元素。向上滚动| |文档。尸体。滚动顶部；var isc roll=文档。文档元素。滚动| |文档。尸体。被偷窃；奥宾。onclick=function(){ Olay。风格。display=' block哦。风格。display=' block狗屎(玉兰油。风格。高度=文档。尸体。偏移右侧“px”)；};奥洛斯。onclick=function(){ Olay。风格。显示='无'；哦。风格。display=" none};奥洛斯。onmousedown=function(event){(event | | window)。事件).cancelBubble=true }；oh2。onmousedown=function(event){ var event=event | | window。事件；bDrag=真；disX=事件。clientx-owin。offsetleft IsCrolldisY=事件。顾客-噢。偏移顶部IscRolt这个。设置捕获这个。setcapture()；返回false }；文件。onmousemove=function(event){ if(！bDrag)返回；var event=event | | window . event var iL=event。客户端x-DIsX iscRoll；var iT=事件。client y-disY IsCrolt；var MaxL=文档。尸体。客户端宽度-owin。用.抵消；var MaxT=文档。尸体。客户身高-owin。偏移光线；iL=iL 0？0 : iLiL=iL maxL？maxL : iLiT=iT 0？0 : iTiT=iT maxT？maxT : iTowin。风格。上边距=owin。风格。边距ft=0；哦。风格。left=iL ' px哦。风格。top=iT ' px返回false }；文件。onmouseup=window。onbulr=Oh2。onlose capture=function(){ BDrag=false；oh2。释放捕获oh2。释放捕获()；};};/script/head dydiv id=' overlay '/div div id=' win ' H2 span id=' close '/span/H2/div中央按钮弹出层/按钮/中心/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。