什麼是模態框 簡單來說，模態框就是在原有的界面上新增一個視窗， 以保證在不刷新網頁的前提下和後臺完成交互。 廢話不多說，先來看效果圖 如圖，我們明顯可以看到網頁上面新增了一個視窗，這也就是常見的模態框樣式 模態框結構 由上圖看出，彈出的最上面一層和原本明顯不在一層，模態框具體可分為三分： 1、文本層 ...
什麼是模態框
簡單來說，模態框就是在原有的界面上新增一個視窗，
以保證在不刷新網頁的前提下和後臺完成交互。
廢話不多說，先來看效果圖
如圖，我們明顯可以看到網頁上面新增了一個視窗，這也就是常見的模態框樣式
模態框結構
由上圖看出，彈出的最上面一層和原本明顯不在一層，模態框具體可分為三分：
1、文本層
文本層就是原本的頁面，他存在於三層圖層最下麵的一層
不用操作樣式
2、陰影層
陰影層就是看著灰濛蒙的那一層，位於三層圖層中間的一層
我們需要把陰影層進行定位(fixed)，讓他蓋在文本層之上
3、彈出框層
我們看到的和需要輸入內容(完成信息的前後臺交互)的一層就是彈出框層，
位於三層圖層最上面一層，我們也需要把這一層進行定位(fixed)，使他位於陰影層之上顯示
註：既然陰影層和彈出框層都需要定位(fixed),那麼誰顯示在上面就需要根據z-index來確定
簡單模態框對話代碼
1.先寫html代碼
2.再寫css樣式
3.利用jquery代碼綁定點擊事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>簡易模態框</title> <style> /*我們先來把陰影層樣式搞定,大小為全屏視窗,透明度調低一些,這樣可以看到文本框的內容*/ .shadow{ width: 100vw; height: 100vh; background-color: black; opacity: 0.4; top: 0; left: 0; position: fixed; display: none; /*先讓他不顯示，然後我們點擊按鈕顯示*/ z-index: 6; } /*彈出框層設置基本差不多，需要註意把z-index設的比陰影層高*/ .frame{ width: 300px; height: 300px; background-color: white; position: fixed; top: 200px; left: 400px; z-index: 66; display: none; /*先讓他不顯示，然後我們點擊按鈕顯示*/ } </style> </head> <body> <!--這裡我們就把body當成我們的文本層--> <h1>這是文本層</h1> <button type="button" class="show">點我彈出模態框</button> <!--再來創建陰影層--> <div class="shadow"></div> <!--創建彈出框層--> <div class="frame"> <span>這是彈出框層</span><br> <input type="text"> <input type="button" value="提交" class="submit"> <input type="button" value="取消" class="cancel"> </div> </body> <!--導入jquery--> <script src="http://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> <script> //第一步，我們需要監視文本層的按鈕，一點擊我們就把模態框顯示出來 $('.show').click(function () { $('.shadow').show(); $('.frame').show(); }); //第二步，我們需要監視彈出框層的取消按鈕，一點擊就把模態框隱藏起來 $('.cancel').click(function () { $('.shadow').hide(); $('.frame').hide(); }); //到此位置，簡易模態框就完成了 </script> </html>
