01第一節：什麼是模態窗口
#JavaScript#什麼是模態窗口，是指當模態窗口彈出來的時候，滑鼠不能單擊這個對話框之外的區域。一般用於給用戶一個提示信息，必須關閉模態窗口之後才可以進行其它的操作。
圖1
圖1就是一個使用DIV+CSS自定義的一個模態窗口，其優點是個性化強，根據系統要求完全自行設計，而系統窗口是無法做到的。
02第二節：CSS 設置
一、 position定位
在CSS樣式中，position屬性主要用來設置元素的定位。position屬性可以設置不同的定位方式，任何元素都可以定位。
絕對定位：是指針對瀏覽器的窗口位置對模態窗口進行定位，固定在一個位置，不會被其它的元素影響。相對定位：是指模態窗口的位置相對於其它元素而進行定位，會受到其它元素的影響。Position屬性的值如下說明：
圖2
元素的定位類型說明如下：
static：又稱為靜態定位，它是position屬性的默認值，屬於正常定位，也就是對於top/bottom/left/right的設置無效。absolute：又稱為絕對定位，它是基於父級別的元素進行定位的，但是該值有兩種特殊的情況：A：如果父元素沒有使用position屬性，則子元素使用position=「absolute」，子元素的top/left/right/bottom的值是相對於瀏覽器定位的。
下面我們將父元素和子元素在頁面上呈現一下，可清楚的認識它們：
圖3
B：如果父元素使用了position屬性，則子元素使用了position=「absolute」， 子元素的top/left/right/bottom的值是相對於父元素定位的。
只要父元素使用了position屬性，則子元素就是相對於父元素定位的。
圖4
fixed：不管父元素是否使用了position屬性，則子元素使用position=「fixed」都是相對於瀏覽器進行定位的。relative：在什麼情況下都是相對於父元素進行定位的。如果要使一個DIV相對於整個瀏覽器定位，並且是全屏顯示，帶背景色，則可以設置如下CSS樣式：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><style type="text/css">body{margin:0px; padding:0px;}.alertBox{position:fixed;width:100%;height:100%;background-color:#808080;}</style></head><body><div></div></body></html>
運行一下具有背景色的頁面：
圖5
二、opacity透明
opacity屬性是CSS 3版本新增加的屬性，用於設置HTML元素的透明度，1表示不透明，0表示完全透明。透明度的設置在0-1之間。例如 opacity=0.5，半透明。
例如：現在給一個div元素設置透明度為30%
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title></head><body><div style="width:400px; height:200px; background-color:#808080;">不透明</div><div style="width:400px; height:200px; background-color:#808080;opacity:0.3">透明30%</div></body></html>
運行一下這個設置了頁面透明度的頁面：
圖6
三、 z-index堆疊
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
下面的Html代碼設置一下z-index屬性：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title></head><body><div style="background-color:#808080;width:400px; height:400px;"><div style="background-color:#ff0000;width:100px; height:100px;position:fixed"></div></div></body></html>
運行一下具有z-index的頁面結果：
圖7
03第三節：DIV+CSS設置提示窗口
一、整體效果
通過上面對CSS三個屬性的設置，則可以通過DIV+CSS設置模態提示窗口，效果如下：
圖8
當點擊「保存」或「提交」按鈕之後，如果頁面上的信息沒有通過驗證，則會給出提示信息，之前我們直接使用window.alert()來提示，但通過上面的DIV+CSS模態提示窗口，更能提升用戶的體驗。
二、 CSS樣式
使用CSS設置模態窗口的完整代碼：
<style type="text/css">body {margin: 0px;padding: 0px;}/*遮罩層，帶透明度*/.alertBox {position: fixed;width: 100%;height: 100%;background-color: #808080;opacity: 0.3;z-index: 1000;display: block;}/*模態提示框*/.msgBox {background-color: #fff;z-index: 1001;position: absolute;margin: 0 auto;top: 50%;left: 50%;margin-top: -100px;margin-left: -200px;width: 400px;height: 200px;cursor: pointer;display: block;}.msgBox .title {background-color: #0094ff;color: #fff;height: 35px;line-height: 35px;text-align: right;padding-right: 5px;}.msgBox .msgBody {padding-left: 20px;margin-top: 50px;}.msgBox .msgButton{text-align:center;margin-top:20px;}.btn {background-color: #0094ff;color: #fff;width: 80px;height: 30px;border: 0px;}</style>
三、 HTML代碼
將模態窗口的CSS樣式應用在Html代碼中：
<body><div></div><div><div><div>關閉</div></div><div><span id="message"></span></div><div><input id="Button1" type="button" value="確定" /></div></div></body>
運行一下使用html+css設置的模態窗口，其最終的樣子如下圖所示：
圖9
四、 JavaScript代碼
使用JavaScript代碼來控制DIV+CSS模態窗口的顯示和隱藏。
<script type="text/javascript">function show(msg) {var alertBox = document.getElementById("alertBox");alertBox.style.display = "block";var msgBox = document.getElementById("msgBox");msgBox.style.display = "block";msgBox.style.top = "20%";var msgX = document.getElementById("message");msgX.innerText = msg;}function hideWindow() {var alertBox = document.getElementById("alertBox");alertBox.style.display = "none";var msgBox = document.getElementById("msgBox");msgBox.style.display = "none";}</script>
04第四節、完整的DIV+CSS+JS代碼
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">body {margin: 0px;padding: 0px;}/*遮罩層，帶透明度*/.alertBox {position: fixed;width: 100%;height: 100%;background-color: #808080;opacity: 0.3;z-index: 1000;display: none;}/*模態提示框*/.msgBox {background-color: #fff;z-index: 1001;position: absolute;margin: 0 auto;top: 50%;left: 50%;margin-top: -100px;margin-left: -200px;width: 400px;height: 200px;cursor: pointer;display: none;}.msgBox .title {background-color: #0094ff;color: #fff;height: 35px;line-height: 35px;text-align: right;padding-right: 5px;}.msgBox .msgBody {padding-left: 20px;margin-top: 50px;}.msgBox .msgButton {text-align: center;margin-top: 20px;}.btn {background-color: #0094ff;color: #fff;width: 80px;height: 30px;border: 0px;}</style><script type="text/javascript">function show(msg) {var alertBox = document.getElementById("alertBox");alertBox.style.display = "block";var msgBox = document.getElementById("msgBox");msgBox.style.display = "block";msgBox.style.top = "20%";var msgX = document.getElementById("message");msgX.innerText = msg;}function hideWindow() {var alertBox = document.getElementById("alertBox");alertBox.style.display = "none";var msgBox = document.getElementById("msgBox");msgBox.style.display = "none";}</script></head><body><div id="alertBox"></div><div id="msgBox"><div><div onclick="hideWindow()">關閉</div></div><div><span id="message"></span></div><div><input id="Button1" type="button" onclick="hideWindow()" value="確定" /></div></div><input type="button" onclick="show('信息填寫不完整，請按要求填寫！')" value="保存" /></body></html>
將上面的代碼保存到*.html文件中，然後運行一下效果：
圖10
在圖10中點擊「保存」按鈕，就會彈出模態窗口。
圖11
在圖11中，一個完整的，顯示在瀏覽器窗口中間的模態窗口就出現了。
在這裡，我們將DIV+CSS設計的一個完整的模態窗口給開發出來了，使用模態窗口可以讓系統的提示信息更加美觀，且完整自定義和個性化，給用戶一個非常棒的用戶體驗。