欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2010年03月21日 23:48:17   作者:  
javascript alert函數(shù)的替代方案,一個(gè)自定義的對(duì)話框的方法
大家好,我們平時(shí)在使用Javascript的時(shí)候,經(jīng)常會(huì)需要給用戶提供一些反饋信息,完成這個(gè)功能有很多種方法。但在平時(shí)開發(fā)中午我們用的最多的可能就是alert這個(gè)函數(shù)了(這里只說(shuō)一般情況,不排除個(gè)別高手~),使用這個(gè)函數(shù)確實(shí)很方便,可以很簡(jiǎn)單的向用戶提供一些交互信息。不過(guò)它也有很多不足,比如他的外觀很簡(jiǎn)

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

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

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

首先給大家看看效果,先有一個(gè)直觀的了解:

 如上圖所示,經(jīng)過(guò)我的測(cè)試,這個(gè)對(duì)話框可以使用在IE6 7 8,F(xiàn)irefox,Chrome等多個(gè)主流瀏覽器中。下面就和大家一起看看他的代碼吧。
首先,我們需要判斷瀏覽器的類型,這里用了幾個(gè)bool變量來(lái)代表不同的瀏覽器。
復(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;
}

  如上所示,這里通過(guò)檢測(cè)agent頭來(lái)判斷不同的瀏覽器,這是一個(gè)比較簡(jiǎn)單的判斷方法。
  下面開始構(gòu)造我們的對(duì)話框,在構(gòu)造對(duì)話框前,我們先要制造一種模態(tài)窗體的效果(就是當(dāng)對(duì)話框彈出來(lái)的時(shí)候,用戶不能操作頁(yè)面上的其余內(nèi)容),這里我們就用一個(gè)黑色的透明層來(lá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);

  上面的代碼,我們首先將瀏覽器的滾動(dòng)條禁止,以防止用戶在彈出對(duì)話框的時(shí)候滾動(dòng)瀏覽器窗口,接下來(lái)設(shè)定相應(yīng)的樣式,一個(gè)比較重要的就是8-13行,這里根據(jù)瀏覽器的類型來(lái)應(yīng)用不同的CSS樣式來(lái)達(dá)到透明的效果,對(duì)于IE瀏覽器,我們使用IE自帶的濾鏡功能,而對(duì)于其他瀏覽器,我們使用基于CSS3的rgba方式實(shí)現(xiàn)透明效果。
  接下來(lái),我們要構(gòu)造對(duì)話框,這里首先創(chuàng)建了一個(gè)div層,來(lái)代表我們整個(gè)對(duì)話框。方法如下:
復(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ù)消息的字?jǐn)?shù)計(jì)算了對(duì)話框的尺寸(這里的計(jì)算方法不一定最好,如果有更好的計(jì)算方法還望大家指教),后面那些DOM代碼就不用我多解釋了吧。
  接下來(lái),我們創(chuàng)建對(duì)話框的標(biāo)題欄,這個(gè)用來(lái)顯示對(duì)話框的標(biāo)題,并且用它了實(shí)現(xiàn)對(duì)話框的拖動(dòng)操作。
復(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);

  這里呢,有必要說(shuō)一下的就是,鼠標(biāo)按下和彈起事件,這里給div對(duì)象多增加了一個(gè)dragging的屬性,用來(lái)代表對(duì)話框是否正在拖動(dòng)中(這也是JS的特性之一,對(duì)object類型的對(duì)象指定新屬性的一個(gè)方法:如果之前對(duì)象沒(méi)有這個(gè)屬性,只需通過(guò)對(duì)象名.屬性名="值" 的方式,就可以為對(duì)象增加新屬性),在鼠標(biāo)移動(dòng)事件中,我們通過(guò)對(duì)象的dragging屬性,來(lái)決定是否移動(dòng)對(duì)話框,關(guān)于對(duì)話框的移動(dòng)位置,這里我偷懶了~沒(méi)有判斷對(duì)話框和鼠標(biāo)的相對(duì)位置,而是給了一個(gè)常量,這樣每次開始拖動(dòng)時(shí),對(duì)話框會(huì)稍微"瞬移"一下,有興趣的朋友可以幫忙完善一下,呵呵。
  最后,是關(guān)于對(duì)話框內(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)該不用多做解釋了,稍微說(shuō)一下,就是在13-22行的代碼,這個(gè)是根據(jù)不同的瀏覽器來(lái)分別實(shí)現(xiàn)漸變效果,IE的話,用微軟提供的漸變,Webkit或者Gecko內(nèi)核的瀏覽器使用相應(yīng)的CSS3標(biāo)準(zhǔn)也可以實(shí)現(xiàn)漸變效果。
  最后嘛,這個(gè)方法支持大多數(shù)瀏覽器,個(gè)別瀏覽器如果不能完全支持,還請(qǐng)各位見諒,期待大家有更加完善的方法一起討論,下面是一個(gè)示例,有興趣的朋友可以看看。轉(zhuǎn)載請(qǐng)注明出處~
示例文件:JS對(duì)話框?qū)崿F(xiàn)

相關(guān)文章

最新評(píng)論