經常做java web前端的兄弟可能會感覺到，有時候想彈出個模態窗口，還得考慮瀏覽器的兼容性，Firefox和chrome等不支持模態窗口，且彈出窗的樣式相當讓人不滿意。現在html5,css3等頁面技術這么流行，加上蘋果應用的逐漸普及，用戶體驗要求越來越高，這是個娛樂的年代，是個拼效果的年代。瀏覽一個布局糟糕的網站，對于追求完美的IT人員來說，不亞于一場災難。

繼續說彈窗。可能你已經在網上找到JQUERY彈窗，但樣式不一定讓你滿意吧，且只是簡單的用，沒有研究它的實現原理。下面我就不僻淺簿，不使用任何輔助技術，用純Javascript、HTML4.0.1及CSS3，說一說這個彈窗。

詳細實現步驟：

1.創建用于彈出的DIV，代碼如下：

說明：DIV里嵌了一個<table>，是用于將DIV中的相關元素位置固定。一個彈窗，我們肯定需要標題欄和顯示內容的部分。

1） <table>的第一行用來作彈窗的標題欄，我們加了背景色 <tr style="background-color:#075E8B;">? 這個 顏色是一種較深的藍，可以根據自己的喜好設定。

2） 同時標題字體以白色顯示，更加醒目和美觀。

3） 用10 pt的字號，這個字號是一個適中的比例（12 pt字號太大，顯得凌亂和突兀）。

2.接下來，我們為這個DIV添加樣式（CSS）

對樣式各屬性的說明如下 ：

1） background-color:#ffffff;表示DIV的背景色為白色

2） border-radius:3px;這個是圓色，讓DIV四個角有一定的弧度，不會顯得那么生硬，大概3個象素

3） border:2px solid #075E8B; 邊框，2個象素寬

4） position:absolute; 位置：絕對定位。既然是絕對定位，就需要有個參照物，默認以最靠近的一個position:ralative;的元素為參照。如果沒有position:ralative的元素，則以body為參照。則此時左邊距和頂邊距都為0。我們通過top和left屬性來絕對定位它。

5） display:block;是否可見。block可見，none不可見。我們暫時設為可見的，是為了美化樣式（看不見還怎么調？），調好之后，改為none

6） width:460px;DIV的寬度，這個也是暫時寫的寬度，為了美化樣式用，實際應由調用的地方根據需要傳進來。別急，請繼續，大功即將告成

7） height:300px;DIV的高度，和寬度作用一樣，沒什么好說的

8） left:200px; DIV的左邊距，此處就是說距離瀏覽器左邊多少象素

9） top:200px;DIV的頂邊距。右邊距和頂邊距確定了，DIV的位置就絕對定位好了（如果你問我右邊和下邊為什么不定位？我真要無語了）

10） box-shadow:5px 5px 5px #322E2F;盒陰影，前面的3個象素值表示幾個邊的偏移量，后面是顏色，深灰色陰影

11）z-index:999;這表示在第幾層。如果彈出層多了，大家可以分別在不同的層，這個就不會誰把誰擠到一邊去了。彈窗要在頂層。

這是最初的效果，繼續。。。

?

3.彈窗的居中問題。根據分辨率的不同，讓彈窗自適應，永遠處于居中狀態。而且窗口大小也不能寫死。

樣式改造一下（去掉邊距、寬度、高度等）：

?

<style type="text/css">

.popWindow{

background-color:#ffffff;

border-radius:3px;

border:2px solid #075E8B;

position:absolute;

display:none;

box-shadow:5px 5px 5px #322E2F;

z-index:999;

}

</style>

?

?

看到沒，其實還是很簡潔的，少了很多行。因為邊距要自適應，寬和高由調用者決定。這里去掉了相關樣式，并把可見變為none。

Javascript函數如下：

解釋一下。

定義了一個javascript函數popWindowShow(url,height,width,title)，函數體里面設置了DIV的左邊距、頂邊距、寬度、高度、標題，最后讓其可見。這個函數由調用者以onclick等事件調用。

加個按鈕，點擊的時候，把這個彈窗顯示出來。這樣就基本實現了彈窗效果了。

<input type="button" value="很牛B的彈窗" onclick="popWindowShow('',300,450,'很牛B的彈窗')"/>

點擊此按鈕，彈出一個居中的DIV窗口。順手寫個關閉的函數吧。

點擊DIV上那個關閉的小圖標時，調用一下這個關閉函數。關閉圖標一會也傳上來。

4.彈窗中的內容

當然不能直接把大量代碼寫在DIV中，我們需要的是一個通用的彈窗。這個就是為什么我們要多傳一個url參數的作用了。

把DIV改造一下，里面的table再加一行，新行里放iframe，url是用來作為ifame的src的。明白了吧。

彈窗的JS函數變動如下：

5.實現模態。方法是加一層DIV，滿屏的，作出彈出層的背景。彈窗時把背景層顯示出來，關閉時別忘記把背景層隱藏掉。

?<div style="width:100%;height:100%;background-color:black;opacity:0.75;z-index:100;position:absolute;display:none;left:0px;top:0px;" id="popWindowBg"></div>

我偷點懶，就把樣式直接寫在DIV標記里了。這個背景層，層數要比彈窗低一點啊，不能比彈窗高，不然要把彈窗遮住了。

至此，DIV模擬模態窗口就全部完成了。不管是什么瀏覽器，都支持（IE8以下不支持陰影和圓角）。

最終效果：

?

?

后面黑色的是遮罩層，用來把整個背景遮住，實現模態功能。

這只是一個簡單的例子，你可以充分發揮，把樣式調得更加美觀大氣。

6.其它說明。

不需要在每一個需要彈窗的地方都加上這些代碼。只需要在最頂層的框架頁面中加上就行了，子頁面通過top對象調用彈窗的函數即可。如：top.popWindowShow(' http://www.baidu.com ',360,200,'baidu');

本文效果支持chrome（谷歌瀏覽器），firefox（火狐瀏覽器），safari（蘋果瀏覽器）及IE9。我用的是chrome瀏覽器。IE8以下版本都不支持陰影效果和圓角效果。

本文來自東哥原創，粗淺但或許也有絲毫可取之處，歡迎大家的圍觀和嘲笑。

附：本文完整代碼：MyHtml.html

附：關閉窗口的小圖標：close.png

?