模態框在網頁中很常見就是在當前頁面中彈出一個框供與客戶交互。
類似于這樣。
首先我們要明白該框工作原理至于怎樣與后端進行交互聯系這邊先不做介紹我們首先是單純的了解怎樣在網頁中實現這樣的一個框圖的顯現。值得注意的是框圖產生時一般的我們滾動鼠標發現網頁仍在移動。實現這樣框圖就是加了兩個盒子
第一個盒子實現背景：
將整個頁面覆蓋（透明色）
第二個盒子實現交互框。
小編這邊來實現一個最簡單的交互框（代碼量可能相對多了一點，主要是因為樣式多了一點整體結構還是非常簡單的）
代碼如下：
模擬框最關鍵的一步就是在對他們樣式寫好時最先以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:;" rel="external nofollow" class="a1">點擊我登錄</a></div><div id="back"></div><div id="login"> <span id="close_all">×</span></div> </body> 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
