?

　　大家好，我們平時在使用Javascript的時候，經(jīng)常會需要給用戶提供一些反饋信息，完成這個功能有很多種方法。但在平時開發(fā)中我們用的最多的可能就是alert這個函數(shù)了(這里只說一般情況，不排除個別高手～)，使用這個函數(shù)確實很方便，可以很簡單的向用戶提供一些交互信息。不過它也有很多不足，比如他的外觀很簡

單，而且不可控制，再有它屬于瀏覽器級別的函數(shù)，是由各個瀏覽器自己實現(xiàn)的，所以在不同的瀏覽器上面，它的界面都不太一樣。如果是在以前，這種情況或許很容

易被大多數(shù)用戶所接受，不過隨著時間的推移，用戶越來越希望得到更好的體驗。所以現(xiàn)在大家經(jīng)常會在很多網(wǎng)站上看到JS做出來的各種對話框，這些界面會是用戶體

驗提升不少，所以今天就說說關(guān)于這方面的內(nèi)容吧，進(jìn)入正題，不說廢話啦～

?

?　　首先給大家看看效果，先有一個直觀的了解：

?

?

?

　　如上圖所示，經(jīng)過我的測試，這個對話框可以使用在IE6 7 8，Firefox，Chrome等多個主流瀏覽器中。下面就和大家一起看看他的代碼吧。

?

首先，我們需要判斷瀏覽器的類型，這里用了幾個bool變量來代表不同的瀏覽器。

?

?

?1?var?springweb_typeIsIE?=?false;
?2?var?springweb_typeIsGecko?=?false;
?3?var?springweb_typeIsWebkit?=?false;
?4?
?5?var?springweb_typeIsIE6?=?false;
?6?var?springweb_typeIsIE7?=?false;
?7?var?springweb_typeIsIE8?=?false;
?8?var?springweb_typeIsFireFox?=?false;
?9?var?springweb_typeIsChrome?=?false;
10?var?springweb_typeIsSafari?=?false;
11?
12?var?agent?=?window.navigator.userAgent;
13?
14?if?(agent.indexOf("MSIE?6")?!=?-1)?{
15?????springweb_typeIsIE6?=?true;
16?????springweb_typeIsIE?=?true;
17?}
18?else?if?(agent.indexOf("MSIE?7")?!=?-1)?{
19?????springweb_typeIsIE7?=?true;
20?????springweb_typeIsIE?=?true;
21?}
22?else?if?(agent.indexOf("MSIE?8")?!=?-1)?{
23?????springweb_typeIsIE8?=?true;
24?????springweb_typeIsIE?=?true;
25?}
26?else?if?(agent.indexOf("Firefox")?!=?-1)?{
27?????springweb_typeIsFireFox?=?true;
28?????springweb_typeIsGecko?=?true;
29?}?else?if?(agent.indexOf("Chrome")?!=?-1)?{
30?????springweb_typeIsChrome?=?true;
31?????springweb_typeIsWebkit?=?true;
32?}
33?else?if?(agent.indexOf("Safari")?!=?-1)?{
34?????springweb_typeIsSafari?=?true;
35?????springweb_typeIsWebkit?=?true;
36?}

?

?

　　如上所示，這里通過檢測agent頭來判斷不同的瀏覽器，這是一個比較簡單的判斷方法。

　　下面開始構(gòu)造我們的對話框，在構(gòu)造對話框前，我們先要制造一種模態(tài)窗體的效果（就是當(dāng)對話框彈出來的時候，用戶不能操作頁面上的其余內(nèi)容），這里我們就用一個黑色的透明層來完成這樣的效果。

?1?document.body.style.overflowY?=?"hidden";
?2?document.body.style.overflowX?=?"hidden";
?3?var?divBackground?=?document.createElement("div");
?4?divBackground.style.position?=?"absolute";
?5?divBackground.style.left?=?"0px";
?6?divBackground.style.top?=?document.body.scrollTop?+??"px";
?7?divBackground.style.width?=?"100%";
?8?divBackground.style.height?=?"100%";
?9?if?(springweb_typeIsChrome?||?springweb_typeIsFireFox)?{
10?????divBackground.style.backgroundColor?=?"rgba(0,0,0,0.7)";
11?}?else?{
12?????divBackground.style.backgroundColor?=?"#000000";????
13?????divBackground.style.filter?=?"alpha(opacity=70)";
14?}
15?divBackground.style.zIndex?=?"99";
16?document.body.appendChild(divBackground);

?

?

?　　上面的代碼，我們首先將瀏覽器的滾動條禁止，以防止用戶在彈出對話框的時候滾動瀏覽器窗口，接下來設(shè)定相應(yīng)的樣式，一個比較重要的就是8-13行，這里根據(jù)瀏覽器的類型來應(yīng)用不同的CSS樣式來達(dá)到透明的效果，對于IE瀏覽器，我們使用IE自帶的濾鏡功能，而對于其他瀏覽器，我們使用基于CSS3的rgba方式實現(xiàn)透明效果。

　　接下來，我們要構(gòu)造對話框，這里首先創(chuàng)建了一個div層，來代表我們整個對話框。方法如下：

?

?

?

?1?var?dialogWidth?=?260;
?2?var?dialogHeight?=?120;
?3?var?fontSize?=?14;
?4?var?lineWidth?=?document.body.clientWidth?*?0.7;
?5?if?((fontSize?*?msg.length)?<?lineWidth)?{
?6???????dialogWidth?=?parseInt(fontSize?*?msg.length)?+?50;
?7?}?else?{
?8???????dialogWidth?=?parseInt(lineWidth);
?9???????dialogHeight?+=?parseInt(((fontSize?*?msg.length)?/?lineWidth)?*?fontSize);
10?????????????
11?}
12?????????
13?divDialog.style.width?=?dialogWidth?+?"px";
14?divDialog.style.height?=?dialogHeight?+?"px";????????
15?divDialog.style.position?=?"absolute";
16?divDialog.style.border?=?"1px?solid?#C0D7FA";
17?divDialog.style.borderRight?=?"2px?outset?#DEDEDE";
18?divDialog.style.borderLeft?=?"2px?outset?#DEDEDE";
19?divDialog.style.left?=?((document.body.clientWidth?/?2)?-?(dialogWidth?/?2))?+?"px";
20?divDialog.style.top?=?(document.body.scrollTop +?(document.body.clientHeight?/?2)?-?(dialogHeight?/?2))?+?"px";
21?divDialog.style.zIndex?=?"100";

?

??

?　　這里，首先根據(jù)消息的字?jǐn)?shù)計算了對話框的尺寸（這里的計算方法不一定最好，如果有更好的計算方法還望大家指教），后面那些DOM代碼就不用我多解釋了吧。?

?

　　接下來，我們創(chuàng)建對話框的標(biāo)題欄，這個用來顯示對話框的標(biāo)題，并且用它了實現(xiàn)對話框的拖動操作。

?

?

?1?var?divHead?=?document.createElement("div");
?2?if?(title?!=?undefined)?{
?3?????divHead.innerHTML?=?title;
?4?}?else?{
?5?????divHead.appendChild(document.createTextNode("消息"));
?6?}
?7?divHead.style.width?=?"100%";
?8?divHead.style.height?=?"25px";
?9?divHead.style.lineHeight?=?"25px";
10?divHead.style.fontSize?=?"14px";????????
11?divHead.style.fontWeight?=?"bold";
12?divHead.style.borderBottom?=?"1px?outset?#8989FF";
13?divHead.style.color?=?"white";
14?divHead.style.textIndent?=?"10px";
15?divHead.style.backgroundColor?=?"blue";
16?divHead.style.backgroundImage?=?"url('"?+?springweb_basePath??+?"/images/headbg.png')";
17?divHead.style.cursor?=?"move";
18?divHead.onmousedown?=?function()?{
19?
20?????divDialog.dragging?=?true;
21?????
22?};
23?divHead.onmouseup?=?function()?{
24?
25?????divDialog.dragging?=?false;
26?
27?};
28?
29?document.body.onmousemove?=?function(e)?{
30?
31?????if?(!divDialog.dragging)?return;
32?????e?=?e?||?window.event;
33?????var?mouseX,?mouseY;
34?????var?mouseOffsetX,?mouseOffsetY;
35?????if?(e.pageX?||?e.pageY)?{
36?????????mouseX?=?e.pageX;
37?????????mouseY?=?e.pageY;
38?
39?????}?else?{
40?????????mouseX?=
41?????????????e.clientX?+?document.body.scrollLeft?-
42?????????????document.body.clientLeft;
43?????????mouseY?=
44?????????????e.clientY?+?document.body.scrollTop?-
45?????????????document.body.clientTop;
46?
47?????}
48?????
49?????divDialog.style.left?=?(mouseX?-?dialogWidth?*?0.4)?+?"px";
50?????divDialog.style.top?=?(mouseY?-?10)?+?"px";????????????
51?};
52?????????
53?
54?divDialog.appendChild(divHead);

?

?

　　這里呢，有必要說一下的就是，鼠標(biāo)按下和彈起事件，這里給div對象多增加了一個dragging的屬性，用來代表對話框是否正在拖動中（這也是JS的特性之一，對object類型的對象指定新屬性的一個方法：如果之前對象沒有這個屬性，只需通過對象名.屬性名="值" 的方式，就可以為對象增加新屬性）,在鼠標(biāo)移動事件中，我們通過對象的dragging屬性，來決定是否移動對話框，關(guān)于對話框的移動位置，這里我偷懶了～沒有判斷對話框和鼠標(biāo)的相對位置，而是給了一個常量，這樣每次開始拖動時，對話框會稍微"瞬移"一下，有興趣的朋友可以幫忙完善一下，呵呵。

?

?　　最后，是關(guān)于對話框內(nèi)容區(qū)域的創(chuàng)建：

?

?

?1?var?divContent?=?document.createElement("div");
?2?divContent.style.textAlign?=?"center";
?3?divContent.style.padding?=?"15px";
?4?divContent.style.fontSize?=?"12px";
?5?
?6?if?(springweb_typeIsIE)?{
?7?????divContent.style.height?=?parseInt(dialogHeight?-?25)?+?"px";
?8?}?else?{
?9?????divContent.style.height?=?parseInt(dialogHeight?-?55)?+?"px";
10?}
11?
12?divContent.style.backgroundColor?=?"#ffffff";
13?if?(springweb_typeIsIE6?||?springweb_typeIsIE7?||?springweb_typeIsIE8)?{
14?????divContent.style.filter?=
15?????"progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#FFFFFF,endColorStr=#C2E2F8)";
16?}?else?if?(springweb_typeIsFireFox)?{
17?????divContent.style.backgroundImage?=
18?????"-moz-linear-gradient(left,rgba(255,255,255,1),rgba(194,226,248,1))";
19?}?else?if?(springweb_typeIsWebkit)?{
20?????divContent.style.backgroundImage?=
21?????"-webkit-gardient(linear,0%?0%,100%?100%,from(#FFFFFF),to(#000000))";
22?}
23?
24?
25?
26?
27?divContent.innerHTML?=?msg?+?"<br?/><br?/>";
28?
29?
30?divDialog.appendChild(divContent);
31?
32?var?closeButton?=?document.createElement("img");
33?closeButton.style.cursor?=?"hand";
34?closeButton.setAttribute("src",?springweb_basePath?+?"/images/okButton.png");
35?closeButton.setAttribute("alt",?"確定");
36?
37?//the?click?event?when?the?dialog?is?closing.
38?closeButton.onclick?=?function()?{
39?
40?????document.body.removeChild(divBackground);
41?????document.body.removeChild(divDialog);
42?????document.body.style.overflowY?=?"";
43?? ??document.body.style.overflowX?=?"";
44?};
45?divContent.appendChild(closeButton);
46?divDialog.focus();
47?document.body.appendChild(divDialog);????

?

?

　　這里應(yīng)該不用多做解釋了，稍微說一下，就是在13-22行的代碼，這個是根據(jù)不同的瀏覽器來分別實現(xiàn)漸變效果，IE的話，用微軟提供的漸變，Webkit或者Gecko內(nèi)核的瀏覽器使用相應(yīng)的CSS3標(biāo)準(zhǔn)也可以實現(xiàn)漸變效果。

?

　　最后嘛，這個方法支持大多數(shù)瀏覽器，個別瀏覽器如果不能完全支持，還請各位見諒，期待大家有更加完善的方法一起討論，下面是一個示例，有興趣的朋友可以看看。轉(zhuǎn)載請注明出處～

?

示例文件：示例文件下載

轉(zhuǎn)載于:https://www.cnblogs.com/chenrunuan/archive/2010/03/24/1693701.html

總結(jié)

以上是生活随笔為你收集整理的javascript中alert函数的替代方案，一个自定义的对话框的方法(引用)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。