快捷導航

用js實現(xiàn)的自定義的對話框的實現(xiàn)代碼

更新時間：2010年03月21日 23:48:17 作者：

javascript alert函數(shù)的替代方案，一個自定義的對話框的方法

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

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

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

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

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

　如上圖所示，經(jīng)過我的測試，這個對話框可以使用在IE6 7 8，F(xiàn)irefox，Chrome等多個主流瀏覽器中。下面就和大家一起看看他的代碼吧。
首先，我們需要判斷瀏覽器的類型，這里用了幾個bool變量來代表不同的瀏覽器。

復(fù)制代碼代碼如下:

 
var springweb_typeIsIE = false; 
var springweb_typeIsGecko = false; 
var springweb_typeIsWebkit = false; 
var springweb_typeIsIE6 = false; 
var springweb_typeIsIE7 = false; 
var springweb_typeIsIE8 = false; 
var springweb_typeIsFireFox = false; 
var springweb_typeIsChrome = false; 
var springweb_typeIsSafari = false; 
var agent = window.navigator.userAgent; 
if (agent.indexOf("MSIE 6") != -1) { 
springweb_typeIsIE6 = true; 
springweb_typeIsIE = true; 
} 
else if (agent.indexOf("MSIE 7") != -1) { 
springweb_typeIsIE7 = true; 
springweb_typeIsIE = true; 
} 
else if (agent.indexOf("MSIE 8") != -1) { 
springweb_typeIsIE8 = true; 
springweb_typeIsIE = true; 
} 
else if (agent.indexOf("Firefox") != -1) { 
springweb_typeIsFireFox = true; 
springweb_typeIsGecko = true; 
} else if (agent.indexOf("Chrome") != -1) { 
springweb_typeIsChrome = true; 
springweb_typeIsWebkit = true; 
} 
else if (agent.indexOf("Safari") != -1) { 
springweb_typeIsSafari = true; 
springweb_typeIsWebkit = true; 
} 

　　如上所示，這里通過檢測agent頭來判斷不同的瀏覽器，這是一個比較簡單的判斷方法。
　　下面開始構(gòu)造我們的對話框，在構(gòu)造對話框前，我們先要制造一種模態(tài)窗體的效果（就是當對話框彈出來的時候，用戶不能操作頁面上的其余內(nèi)容），這里我們就用一個黑色的透明層來完成這樣的效果。

復(fù)制代碼代碼如下:

 
document.body.style.overflowY = "hidden"; 
var divBackground = document.createElement("div"); 
divBackground.style.position = "absolute"; 
divBackground.style.left = "0px"; 
divBackground.style.top = "0px"; 
divBackground.style.width = "100%"; 
divBackground.style.height = "100%"; 
if (springweb_typeIsChrome || springweb_typeIsFireFox) { 
　　divBackground.style.backgroundColor = "rgba(0,0,0,0.7)"; 
} else { 
　　divBackground.style.backgroundColor = "#000000"; 
divBackground.style.filter = "alpha(opacity=70)"; 
} 
divBackground.style.zIndex = "99"; 
document.body.appendChild(divBackground); 

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

復(fù)制代碼代碼如下:

 
var dialogWidth = 260; 
var dialogHeight = 120; 
var fontSize = 14; 
var lineWidth = document.body.clientWidth * 0.7; 
if ((fontSize * msg.length) < lineWidth) { 
dialogWidth = parseInt(fontSize * msg.length) + 50; 
} else { 
dialogWidth = parseInt(lineWidth); 
dialogHeight += parseInt(((fontSize * msg.length) / lineWidth) * fontSize); 
} 
divDialog.style.width = dialogWidth + "px"; 
divDialog.style.height = dialogHeight + "px"; 
divDialog.style.position = "absolute"; 
divDialog.style.border = "1px solid #C0D7FA"; 
divDialog.style.borderRight = "2px outset #DEDEDE"; 
divDialog.style.borderLeft = "2px outset #DEDEDE"; 
divDialog.style.left = ((document.body.clientWidth / 2) - (dialogWidth / 2)) + "px"; 
divDialog.style.top = ((document.body.clientHeight / 2) - (dialogHeight / 2)) + "px"; 
divDialog.style.zIndex = "100"; 

　　這里，首先根據(jù)消息的字數(shù)計算了對話框的尺寸（這里的計算方法不一定最好，如果有更好的計算方法還望大家指教），后面那些DOM代碼就不用我多解釋了吧。
　　接下來，我們創(chuàng)建對話框的標題欄，這個用來顯示對話框的標題，并且用它了實現(xiàn)對話框的拖動操作。

復(fù)制代碼代碼如下:

 
var divHead = document.createElement("div"); 
if (title != undefined) { 
divHead.innerHTML = title; 
} else { 
divHead.appendChild(document.createTextNode("消息")); 
} 
divHead.style.width = "100%"; 
divHead.style.height = "25px"; 
divHead.style.lineHeight = "25px"; 
divHead.style.fontSize = "14px"; 
divHead.style.fontWeight = "bold"; 
divHead.style.borderBottom = "1px outset #8989FF"; 
divHead.style.color = "white"; 
divHead.style.textIndent = "10px"; 
divHead.style.backgroundColor = "blue"; 
divHead.style.backgroundImage = "url('" + springweb_basePath + "/images/headbg.png')"; 
divHead.style.cursor = "move"; 
divHead.onmousedown = function() { 
divDialog.dragging = true; 
}; 
divHead.onmouseup = function() { 
divDialog.dragging = false; 
}; 
document.body.onmousemove = function(e) { 
if (!divDialog.dragging) return; 
e = e || window.event; 
var mouseX, mouseY; 
var mouseOffsetX, mouseOffsetY; 
if (e.pageX || e.pageY) { 
mouseX = e.pageX; 
mouseY = e.pageY; 
} else { 
mouseX = 
e.clientX + document.body.scrollLeft - 
document.body.clientLeft; 
mouseY = 
e.clientY + document.body.scrollTop - 
document.body.clientTop; 
} 
divDialog.style.left = (mouseX - dialogWidth * 0.4) + "px"; 
divDialog.style.top = (mouseY - 10) + "px"; 
}; 
divDialog.appendChild(divHead); 

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

復(fù)制代碼代碼如下:

 
var divContent = document.createElement("div"); 
divContent.style.textAlign = "center"; 
divContent.style.padding = "15px"; 
divContent.style.fontSize = "12px"; 
if (springweb_typeIsIE) { 
divContent.style.height = parseInt(dialogHeight - 25) + "px"; 
} else { 
divContent.style.height = parseInt(dialogHeight - 55) + "px"; 
} 
divContent.style.backgroundColor = "#ffffff"; 
if (springweb_typeIsIE6 || springweb_typeIsIE7 || springweb_typeIsIE8) { 
divContent.style.filter = 
"progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#FFFFFF,endColorStr=#C2E2F8)"; 
} else if (springweb_typeIsFireFox) { 
divContent.style.backgroundImage = 
"-moz-linear-gradient(left,rgba(255,255,255,1),rgba(194,226,248,1))"; 
} else if (springweb_typeIsWebkit) { 
divContent.style.backgroundImage = 
"-webkit-gardient(linear,0% 0%,100% 100%,from(#FFFFFF),to(#000000))"; 
} 
divContent.innerHTML = msg + "<br /><br />"; 
divDialog.appendChild(divContent); 
var closeButton = document.createElement("img"); 
closeButton.style.cursor = "hand"; 
closeButton.setAttribute("src", springweb_basePath + "/images/okButton.png"); 
closeButton.setAttribute("alt", "確定"); 
//the click event when the dialog is closing. 
closeButton.onclick = function() { 
document.body.removeChild(divBackground); 
document.body.removeChild(divDialog); 
document.body.style.overflowY = ""; 
}; 
divContent.appendChild(closeButton); 
divDialog.focus(); 
document.body.appendChild(divDialog); 

　　這里應(yīng)該不用多做解釋了，稍微說一下，就是在13-22行的代碼，這個是根據(jù)不同的瀏覽器來分別實現(xiàn)漸變效果，IE的話，用微軟提供的漸變，Webkit或者Gecko內(nèi)核的瀏覽器使用相應(yīng)的CSS3標準也可以實現(xiàn)漸變效果。
　　最后嘛，這個方法支持大多數(shù)瀏覽器，個別瀏覽器如果不能完全支持，還請各位見諒，期待大家有更加完善的方法一起討論，下面是一個示例，有興趣的朋友可以看看。轉(zhuǎn)載請注明出處～
示例文件：JS對話框?qū)崿F(xiàn)

您可能感興趣的文章: