【JavaScript】純粹javascript無任何外掛程式的相容IE6的模態框modal，ie6modal
模態框這東西在很多前端架構裡面也是存在的，但是很多前端架構，如Bootstrap，AmazeUI，Jquery對IE6的相容性極其糟糕，因此如果自己手寫一個純粹javascript無任何外掛程式的的模態框，不僅能夠相容IE6，對其它瀏覽器很有很大的相容性，同時，也好改。
一、基本目標
比如如下的模態框，怎麼用在純粹html+css+javascript，在無任何前端外掛程式的情況下實現呢？
可以看到，是在IETester的IE6模式中進行的，沒有任何問題。
我還在這個模態框裡面鑲嵌了一個表單。反正你想怎麼整就怎麼整。當然，還要可移動什麼的就算了，你根本就沒有必要寫這麼多特效，搞多了，你的客戶也不會賞析你的，浪費表情。
二、基本思想
這東西其實一點不難，網上的代碼寫得太糟糕罷了。
，其實關鍵是你在開啟模態框的那瞬間，把早已隱藏好的定位為position:absolute的模態框顯示出來。
之後在javascript的添加一個大小為整個瀏覽器視窗大小的，灰色透明的div，bodyMask。
IE6是支援透明的。透明樣式，相容全瀏覽器的css寫法如下：
.opacity{filter:alpha(opacity=40);opacity:0.4;}之後，在模態框的“關閉”按鈕，就是把bodyMask用javascript中remove節點的方式remove掉，同時隱藏這個模態框。Javascript對DOM的操作，具體見《【JavaScript】網頁節點的增刪改查》（點擊開啟連結）。
三、製作過程
有了上面的基本思想，則可以開工了。
1、HTML布局
其HTML布局如下，可以看到bodyMask這個灰色遮罩div，在HTML根本沒有出現。一會兒在javascript顯示。
其實模態框也可以在javascript中添加，但是這樣太不好維護了吧？還是藏在HTML部分！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jsModal</title></head><body><!--原網頁的內容--> <h1>純粹javascript無任何外掛程式的相容IE6的模態框</h1> <p>ssssssssssssssssssssss</p> <p>ssssssssssssssssssssss</p> <!--除了這個開啟模態框的按鈕，是調用下面的openNewDiv()函數，其餘沒有任何特別--> <button onclick="openNewDiv()">開啟模態框，登入一ji！</button> <p>ssssssssssssssssssssss</p> <p>ssssssssssssssssssssss</p> <p>ssssssssssssssssssssss</p> <!--這裡是已經藏在網頁中的模態框--> <!--除了寬度，背景顏色，邊框這三個屬性，其餘的顯示、定位、層次屬性都是必須的。z-index層次屬性，只在position:absolute的情況下有效。--> <div id="modalDiv" style="display:none;position:absolute;z-index:2;width:300px;background-color:#FFFFFF;border:3px solid #0066cc;"> <!--這裡僅僅是為模態框的內容好看一點，這個style屬性不是必須的--> <div style="text-align:center; padding:5px"> <!--你想在模態框中布置什麼，就再這裡大書特書吧！--> 使用者名稱：<input type="text"/><br /> 密碼：<input type="text"/><br /> <input type="submit" value="提交"/><button onclick="dismissModal()">關閉</button><br /> </div> </div> </body></html>2、核心指令碼
關鍵是這裡的核心指令碼
<script>function openNewDiv() {//這裡取出當前視窗的長與寬。相容各個瀏覽器，有捲軸沒有捲軸的情況。//你在我的模態框出現的時候，又調整視窗，可能取不到調整視窗之後的大小，那我沒辦法了，我沒理由開個函數去不停地輪詢你是否調整視窗吧？if(document.documentElement.scrollWidth<document.documentElement.clientWidth+document.documentElement.scrollLeft){var windowWidth=document.documentElement.clientWidth+document.documentElement.scrollLeft;}else{var windowWidth=document.documentElement.scrollWidth;}if(document.documentElement.scrollHeight<document.documentElement.clientHeight+document.documentElement.scrollTop){var windowHeight=document.documentElement.clientHeight+document.documentElement.scrollTop;}else{var windowHeight=document.documentElement.scrollHeight;}//先把模態框顯示出來，再利用offsetWidth與offsetHeight取其長與寬//offsetWidth與offsetHeight是可見地區的大小，儘管modalDiv沒有設定height樣式，但同樣可以利用這種方式取其高document.getElementById("modalDiv").style.display="block";var modalDivWidth=document.getElementById("modalDiv").offsetWidth;var modalDivHeight=document.getElementById("modalDiv").offsetHeight;//這裡定位modalDiv主要是為了使其置中document.getElementById("modalDiv").style.left=(windowWidth-modalDivWidth)/2+"px";document.getElementById("modalDiv").style.top=(windowHeight-modalDivHeight)/2+"px";//modalDiv的動作搞完了，搞那個灰色遮罩div，先建立一個節點。var bodyMask=document.createElement("div");bodyMask.id="bodyMask";bodyMask.style.position="absolute";//如果你的網頁中還有其它zIndex，那麼，這個只應該大於其它zindex，同時上面的模態框的zindex，應該比這個zindex大1bodyMask.style.zIndex="1";//這個灰色遮罩層的長與寬就是當前視窗的長與寬。bodyMask.style.width=windowWidth+"px";bodyMask.style.height=windowHeight+"px";bodyMask.style.top="0px";bodyMask.style.left="0px";bodyMask.style.background="#000";//設定其透明度為40%bodyMask.style.filter="alpha(opacity=40)";bodyMask.style.opacity="0.40";//在body節點下添加這個divdocument.body.appendChild(bodyMask);}//關閉模態框就兩步，使模態框隱藏同時移除bodyMaskfunction dismissModal() {document.getElementById("modalDiv").style.display="none";document.body.removeChild(document.getElementById("bodyMask"));}</script>至此，整個相容IE6的模態框就寫完了，誰說不用架構寫不出好網頁的？用架構才越來越寫不出好網頁！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
