js实现仿网易点击弹出提示同时背景变暗效果

本文实例讲述了射流研究…实现仿网易点击弹出提示同时背景变暗效果。分享给大家供大家参考。具体如下：

这里仿网易点击弹出提示，背景变暗提示层效果，圆角，美观简洁，代码稍嫌多。

运行效果如下图所示：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-sina-dialog-bgcolor-codes/

具体代码如下：

htmlheadtitle点击弹出提示，背景变暗/title脚本函数msg(info){ var p=document。创建元素(' DIV ')；if(！信息)var info=' a href=' # ' target=' _ blank ' rel=' external '欢迎光临/a '；p.id=' pp.style.position='绝对；p .风格。宽度=文档。尸体。scrollwidthp .风格。高度=(文档。尸体。偏移右文档。尸体。滚动高度)？100% ' :文档。尸体。滚动高度；p .风格。zindex=' 998p .风格。top=' 0pxp .风格。left=' 0% '；p .风格。背景颜色='灰色'；p.style不透明度=' 0.5 ';p.style.filter='alpha(不透明度=80 ';文件。尸体。append child(p)；var P1=文档。创建元素(' DIV ')；var top=parsent(parsent(文档。尸体。滚动高度)* 0.25)文档。尸体。滚动顶部；p1.style.position='绝对；P1。风格。宽度=' 300像素'；p1.id=' p1var left=math。天花板(文件。尸体。scroll width)-parsent(P1。风格。宽度。替换(' px '，' '))))/2)文档。尸体。scrollLeftP1。风格。高度=' 200像素'；P1。风格。zindex=' 999P1。风格。top=top“px”；P1。风格。left=left ' pxp1.style.border='0px纯红；var html=html=' center ' html=' div class=' P3 ' style=' height :1 px；飞越：隐藏；背景：红色；宽度宽度：294pxborder-left:1px纯红；右边框：1px纯红；/div ' html=' div class=' p2 ' style=' height :1 px；飞越：隐藏；背景：红色；宽度宽度：296pxborder-left:1px纯红；右边框：1px纯红；/div ' html=' div class=' p2 ' style=' height :1 px；飞越：隐藏；背景：红色；宽度宽度：298pxborder-left:1px纯红；右边框：1px纯红；/div ' html=' div class=' P1 ' style=' height :20 px；飞越：隐藏；背景：红色；宽度宽度：300pxborder-left:1px纯红；右边框：1px纯红；color : # ff font-size :9 pt；字体粗细：加粗；向左文本对齐：' 友情提示：/div ' html=' div id=' c ' style=' height :150 px；宽度宽度：300像素背景-color : # FEEACB；飞越：隐藏；边框-左侧：1px纯红；右边框：1px纯红；衬垫-顶部：40像素；' font-size :9 pt'info ' brbr br[a href=' JavaScript : this。' cancle()'关闭/a/div ' html=' div class=' P1 ' style=' height :1 px；飞越：隐藏；背景# FEEACB宽度宽度：298pxborder-left:1px纯红；'右边框：1px纯红；'/div ' html=' div class=' p2 ' style=' height :1 px；飞越：隐藏；背景# FEEACB宽度宽度：296pxborder-left:1px纯红；'右边框：1px纯红；/div ' html=' div class=' P3 ' style=' height :1 px；飞越：隐藏；背景：红色；宽度宽度：294pxborder-left:1px纯红；右边框：1px实心红色/div ' html='/center '文档。尸体。阑尾切除术(P1)；P1 . innerhtml=html var arr=document。getelementsbytagname(' select ')；var I=0；而(iarr。长度){ arr[I]。风格。可见性='隐藏'；我；}这个。cancle=function(){ document。尸体。移除子文档。getelementbyid(' p ')；文件。尸体。移除子文档。getelementbyid(' P1 ')；var arr=文档。getelementsbytagname(' select ')；var I=0；而(iarr。长度){ arr[I]。风格。可见性='可见'；我；} } }/script/head dyinput值='点击弹出提示type=' button ' OnClick=' msg()'//body/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。