js原生彈出框
阿新 • • 發佈：2019-01-04
前段時間研究了下bootstarp框架，對於那個模態框非常感興趣，於是查資料自己寫了一個彈出框，總的來說相容性不太好，但是總之來說做出來了，css並沒有怎麼修飾，所以可能出來的效果比較難看，但是畢竟這個demo已經成型，若想好看的話就自己在css修飾一下就好。
<html> <head> <meta charset="utf-8"> </head> <script> /* * 彈出DIV層 */ function showDiv() { var Idiv = document.getElementById("Idiv"); var mou_head = document.getElementById('mou_head'); Idiv.style.display = "block"; //以下部分要將彈出層居中顯示 Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/2+document.documentElement.scrollLeft+"px"; Idiv.style.top =(document.documentElement.clientHeight-Idiv.clientHeight)/2+document.documentElement.scrollTop-50+"px"; //以下部分使整個頁面至灰不可點選 var procbg = document.createElement("div"); //首先建立一個div procbg.setAttribute("id","mybg"); //定義該div的id procbg.style.background = "#000000"; procbg.style.width = "100%"; procbg.style.height = "100%"; procbg.style.position = "fixed"; procbg.style.top = "0"; procbg.style.left = "0"; procbg.style.zIndex = "500"; procbg.style.opacity = "0.6"; procbg.style.filter = "Alpha(opacity=70)"; //背景層加入頁面 document.body.appendChild(procbg); document.body.style.overflow = "hidden"; //取消滾動條 //以下部分實現彈出層的拖拽效果 var posX; var posY; mou_head.onmousedown=function(e) { if(!e) e = window.event; //IE posX = e.clientX - parseInt(Idiv.style.left); posY = e.clientY - parseInt(Idiv.style.top); document.onmousemove = mousemove; } document.onmouseup = function() { document.onmousemove = null; } function mousemove(ev) { if(ev==null) ev = window.event;//IE Idiv.style.left = (ev.clientX - posX) + "px"; Idiv.style.top = (ev.clientY - posY) + "px"; } } function closeDiv() //關閉彈出層 { var Idiv=document.getElementById("Idiv"); Idiv.style.display="none"; document.body.style.overflow = "auto"; //恢復頁面滾動條 var body = document.getElementsByTagName("body"); var mybg = document.getElementById("mybg"); body[0].removeChild(mybg); } </script> <body> <div id="Idiv" style="display:none; position:absolute; z-index:1000; background:#67a3d9; width:300px;height:200px;"> <div id="mou_head" style="width="100px; height=10px;z-index:1001; position:absolute;">這個是用來實現拖層</div> <input type="button" value="關閉" onclick="closeDiv();" /> </div> <input type="button" value="點選" onclick="showDiv()"> <!--結束--> </body> </html>