web自定義彈出框

原文鏈接：設計製作一個自己的個性化彈出提示窗

做前端的一般都知道，儘量減少使用alert，主要因爲系統的彈出框會終止當前一切進程，甚至連窗口操作也被禁止，實在是不太友好，所以這次講下如何定製一個你自己的彈出提示框。即：使用html+css製作一個提示框，並使用javascript爲它添加常用方法來達到替換系統提示框的目的。

因爲時間有限（太忙了，養家餬口的男人你傷不起啊～），我打算分3篇：1、設計製作一個自己的彈出提示框；2、爲你的彈出提示框添加交互功能；3、拖拽你的彈出提示框。

在此之前先讓我們看下各瀏覽器的alert效果：
<!--more-->


Chrome下當同一個頁面多次alert的時候，會提示可以禁止此頁面再次彈出提示框，Opera直接就提示可以禁止腳本繼續運行，firefox4 將簡潔進行到底，自我感覺Chrome 在這點上應該向人家學習，ie還是老樣子，大家都熟悉了。

我們來分解下提示框的組成部分，我畫了個圖（懶人有懶法）：



分析下這個結構，它必須有個默認寬度，不能撐的整屏全糊住，高度應該由其中的內容來決定，一開始出現是在屏幕居中，並要有個半透明的遮罩以凸（好邪惡的字 :c5 ）顯出它的存在，而且點擊標題不鬆手還可以移動，考慮下，如何用html代碼來構架。

先聲明：我只是講下如何製作的一個思路，至於具體的製作，你不需要全部照我的來，我的設計並不出衆（好吧，我承認很爛！摔！ :e7 ）。下面這個就是我的設計:



現在你應該已經構思出了一個提示框的html代碼，很簡單的，如下：

<divid="hbg"></div><!-- 半透明背景遮罩 -->
<divid="alertM"><!-- 提示框的容器 -->
<h5id="alertT">提示</h5><!-- 標題 -->
<aid="alertR"title="關閉"href="void(0)"< /span>>&times;</a><!-- 關閉按鈕 -->
<pid="alertP">測試</p><!-- 內容 -->
<divid="alertBtns"><!-- 按鈕區域 -->
<aid="alertY"title="確認"href="void(0)"< /span>>確認</a><!-- 確認和取消按鈕 -->
<aid="alertN"title="取消"href="void(0)"< /span>>取消</a>
</div>
</div>

我們來寫下css，注意到裏面的每個元素都有個id嗎，主要是爲了減少其被你的其他樣式所覆蓋的緣故，叫這幾個id的應該不多吧，先進行初始化，減少不兼容：

#alertM,#alertT,#alertR,#alertP,#alertBtns{
 margin:0;
 padding:0;
 font-size:14px;
 line-height:24px;
 font-family:arial,sans-serif;
 text-align:left
}
#alertR,#alertBtns a{
 text-decoration:none;
}

然後是半透明背景，注意背景的高度和透明度，這裏是以後要由js來控制的，而容器之所以絕對定位，主要是爲了以後定位方便並添加拖拽功能：

#hbg{
 width:100%;
 position:absolute;
 background:#000;
 z-index:998;/* 設置層級，主要是爲了遮住頁面內的其他內容 */
 top:0;
 left:0;
 height:2000px;/* 隨便填，超過整屏高度就行，後面由js控制 */
 opacity:0.6/* ie8及以下瀏覽器看不到效果，我也懶的給你寫filter，換其他的現代瀏覽器吧 */
}
#alertM{
 position:absolute;/* 絕對定位，爲了以後控制方便 */
 top:200px;
 background:#fff;
 z-index:999;/* 層級，當然要比背景高1啦，要不你怎麼看見 */
 width:400px;
 height:auto;
 left:600px;/* 隨便填，後面由js控制 */
 border:1px #ccc solid
}

標題欄和內容，非常簡單的：

#alertT{
 margin:4px;
 padding:0 16px;
 background:#0398e1;
 color:#fff;
 border:1px #16a8fc solid;
}
#alertP{
 padding:12px;
}

關閉按鈕，右浮動，並使用負值margin 調高：

#alertR{
 font-size:24px;
 float:right;/* 右浮動 */
 margin:-32px 8px 00;/* 使用負值margin 調高 */
 padding:4px;
 color:#72d5fb;
 font-weight:bold;
}
#alertR:hover{
 color:#fff;
}

底部按鈕區域，也是非常簡單的：

#alertBtns{
 text-align:right;
}
#alertBtns a{
 margin:8px;
 padding:0 24px;
 color:#000;
 background: #EEE;
 border: 1px #E6E6E6 solid;
 display: inline-block;
}
#alertBtns a:hover{
 background: #ccc;
 border: 1px #ddd solid;
}
#alertBtns a:active{
 background: #bbb;
 border: 1px #aaa solid;
}

完成啦，怎麼樣，什麼效果，是不是有種微妙的坑爹感覺 :e1 ？是不是如下圖一樣：



彆着急，還沒完，還得繼續添加下css3效果，如果你用的是ie（神馬360，qq，搜狐全都是ie內核）並且版本不高於8的話就沒必要繼續了，下面的代碼對你來說是另一個世界的存在。

非ie黨們，我們繼續，先調整下容器和標題：

#alertM{
 box-shadow:0px 0px 24px #000;/* 陰影 */
 border-radius:12px;/* 圓角 */
}
#alertT{
 text-shadow:0px 1px 1px #000;/* 文字陰影 */
 background-p_w_picpath:-moz-linear-gradient(top, #03b3f6, #0374c6);/* 火狐下的漸變 */
 background-p_w_picpath:-webkit-gradient(linear,left top, left bottom, color-stop(0, #03b3f6),color-stop(1, #0374c6));/* webkit內核下的漸變 */
 border-radius:8px;
 box-shadow:0px 1px 2px rgba(0,0,0,0.8);
}

然後是確認和取消按鈕，跟上面差不多：

#alertBtns a{
 text-shadow: 0px 1px 1px white;
 background-p_w_picpath: -moz-linear-gradient(top, #fff, #ccc);
 background-p_w_picpath: -webkit-gradient(linear,left top, left bottom, color-stop(0, #fff),color-stop(1, #ccc));
 border-radius: 4px;
 box-shadow: 0px 0px 2px rgba(0,0,0,0.8);
}
#alertBtns a:hover{
 background: #ccc;
 background-p_w_picpath: -moz-linear-gradient(top, #f6f6f6,#c6c6c6);
 background-p_w_picpath: -webkit-gradient(linear,left top, left bottom, color-stop(0, #f6f6f6),color-stop(1, #c6c6c6));
 box-shadow: 0px 0px 3px rgba(0,0,0,1);
 border: 1px #ddd solid;
}
#alertBtns a:active{
 background: #bbb;
 background-p_w_picpath: -moz-linear-gradient(top, #f3f3f3,#bbb);
 background-p_w_picpath: -webkit-gradient(linear,left top, left bottom, color-stop(0, #f3f3f3),color-stop(1, #bbb));
 box-shadow: 0px 0px 2px rgba(0,0,0,0.6);
 border: 1px #aaa solid;
}

最後是關閉按鈕，我要弄點有趣的，給它添加個旋轉動畫：

#alertR{
 text-shadow:0px 1px 1px #000;
 -webkit-transform: rotate(-360deg);/* 一開始時候先設定旋轉-360度，這樣鼠標懸浮的時候轉的圈數多一些 */
 -moz-transform: rotate(-360deg);
 -o-transform: rotate(-360deg);
 transform: rotate(-360deg);
 -webkit-transition: -webkit-transform 0.6s ease-out;/* 設定動畫部分，時間以及效果 */
 -moz-transition: -moz-transform 0.6s ease-out;
 -o-transition: -o-transform 0.6s ease-out;
 transition: transform 0.6s ease-out;
}
#alertR:hover{
 color:#fff;
 -webkit-transform: rotate(360deg);/* 就是在0.6s 內從-360度轉到360度的意思 */
 -moz-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);
}
#alertR:active{
 text-shadow:0px 0px 1px #000;
}

呼，恭喜你，第一部分達成，建議你修改下css，弄些自己的漸變，多練練。當然，假如你實在是不想這麼折騰的話，可以直接查看：Demo

下期講解使用jquery給你的提示框添加互動效果，輸入一些參數就可以控制顯示時間，關閉方法，確認方法，真正替代系統的默認提示框。