JavaScript模態框實現
阿新 • • 發佈：2018-11-13
模態框在網頁中很常見就是在當前頁面中彈出一個框供與客戶互動。
類似於這樣。
首先我們要明白該框工作原理至於怎樣與後端進行互動聯絡這邊先不做介紹我們首先是單純的瞭解怎樣在網頁中實現這樣的一個框圖的顯現。值得注意的是框圖產生時一般的我們滾動滑鼠發現網頁仍在移動。實現這樣框圖就是加了兩個盒子
第一個盒子實現背景：
將整個頁面覆蓋（透明色）
第二個盒子實現互動框。
小編這邊來實現一個最簡單的互動框（程式碼量可能相對多了一點，主要是因為樣式多了一點整體結構還是非常簡單的）
程式碼如下：
模擬框最關鍵的一步就是在對他們樣式寫好時最先以display:none;讓他們不顯示，然後以js觸動改變display再講他們顯現出來。
<title>點選顯示彈框</title> <style type="text/css"> *{ margin: 0; padding: 0; } #btn{ text-align: center; } .a1{ display: block; text-decoration: none; //建立一個超連結點選可現實彈框 } #back{ width: 100%; height: 100%; background: rgba(0,0,0,.5); //設定黑色的透明色 position: fixed; //在頁面中絕對定位 top: 0; left: 0; z-index: 999; //因為要覆蓋全網頁所以設定一個比較高的權重 display: none; } #login{ display: none; width: 400px; height: 250px; background-color: #fff; position: fixed; top:50%; left:50%; margin:-125px 0 0 -200px; z-index: 1000; } //彈框用樣也是像背景一樣實現 #close_all{ position: absolute; top:10px; right:10px; width:15px; height:15px; font-size:15px; cursor: pointer; //該步滑鼠懸停時變小手 } //給×符號定位在右上角 </style> <script type="text/javascript"> window.onload=function () { var btn=document.getElementById("btn"); var back=document.getElementById("back"); var login=document.getElementById("login"); var close_all=document.getElementById("close_all"); btn.onclick=function () { back.style.display="block"; login.style.display="block"; } close_all.onclick=function () { back.style.display="none"; login.style.display="none"; } } </script> </head> <body> <div id="btn"> <a href="javascript:;" class="a1">點選我登入</a> </div> <div id="back"></div> <div id="login"> <span id="close_all">×</span> </div> </body>