HTML页面弹出自定义对话框带遮蔽罩(使用JavaScript)
转载:http://blog.sina.com.cn/s/blog_610f47c50100ohe4.html
原理其实很简单:首先绘制弹出的自定义对话框,将其使用display:none隐藏,因为设置为none,其在页面中并不占用空间;
遮蔽罩使用一个div,然后将其宽高设置为整个显示窗口大小,配置其透明度,在将其z-index属性大于主页面的z-index的值,也就是遮蔽层在主页面上方,如此即可
事先隐藏一个div,在需要的时候调出显示既可。
<!--以下代码从网上多处学习整合而成,由于来源不一,并经过自行修改,请原谅未作注明-->
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | <script type= "text/javascript" > var docEle = function () { return document.getElementByIdx_x(arguments[0]) || false ; } function openNewDiv(_id) { var m = "mask" ; if (docEle(_id)) document.body.removeChild(docEle(_id)); if (docEle(m)) document.body.removeChild(docEle(m)); //mask遮罩层 var newMask = document.createElement_x( "div" ); newMask.id = m; newMask.style.position = "absolute" ; newMask.style.zIndex = "1" ; _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth); _scrollHeight =Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); newMask.style.width = _scrollWidth + "px" ; newMask.style.height = _scrollHeight + "px" ; newMask.style.top = "0px" ; newMask.style.left = "0px" ; newMask.style.background = "#33393C" ; newMask.style.filter = "alpha(opacity=40)" ; newMask.style.opacity = "0.40" ; document.body.appendChild(newMask); //新弹出层 var newDiv = document.createElement_x( "div" ); newDiv.id = _id; newDiv.style.position = "absolute" ; newDiv.style.zIndex = "9999" ; newDivWidth = 250; newDivHeight = 200; newDiv.style.width = newDivWidth + "px" ; newDiv.style.height = newDivHeight + "px" ; newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px" ; newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px" ; newDiv.style.background = "#EFEFEF" ; newDiv.style.border = "1px solid #860001" ; newDiv.style.padding = "5px" ; newDiv.innerHTML = document.getElementByIdx_x( "HideDlg" ).innerHTML; newDiv.innerHTML+= " " document.body.appendChild(newDiv); //弹出层滚动居中 function newDivCenter() { newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px" ; newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px" ; } if (document.all) { window.attachEvent( "onscroll" ,newDivCenter); } else { window.addEventListener( 'scroll' ,newDivCenter, false ); } //关闭新图层和mask遮罩层 var newA = document.createElement_x( "a" ); newA.href = "#" ; newA.innerHTML = "Cancel" ; newA.onclick = function () { if (document.all) { window.detachEvent( "onscroll" ,newDivCenter); } else { window.removeEventListener( 'scroll' ,newDivCenter, false ); } document.body.removeChild(docEle(_id)); document.body.removeChild(docEle(m)); return false ; } newDiv.appendChild(newA); } function closeDiv() { if (document.all) { window.detachEvent( "onscroll" ,newDivCenter); } else { window.removeEventListener( 'scroll' ,newDivCenter, false ); } document.body.removeChild(docEle(_id)); document.body.removeChild(docEle(m)); return false ; } </script> <!--img控件,点击触发--> <div id= "1" align= "center" style= "cursor:pointer" > <br> <img src= "1.png" alt= "" style= "width:123px;height:43px;" onclick= "openNewDiv('newDiv');return false;" /> </div> <!--隐藏的div,随意修改--> <div id= "HideDlg" style= "display:none;" > <input name= "Btn" type= "button" value= "1" onclick="window.location.href= 'http://1.aspx' </div> |
优点:显示效果好,无边框,弹出后始终保持在屏幕中部,主页面变灰。
缺点:代码复杂。
注意:如果是在motherpage中添加,触发控件如果为<input img>的时候,可能会触发页面自刷屏导致页面跳转被自己覆盖
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步