????? 申明：本人并不反對(duì)提倡用js框架的朋友以及觀點(diǎn),同時(shí)本人有些東西都是從框架中學(xué)來(lái)的。

????? 個(gè)性化提示框圖例:

????? 1:純文本提示。

????

?????? 2:帶選擇按鈕的提示框。

?????? 源碼下載

????? 主旨：現(xiàn)今的js框架已經(jīng)非常成熟，這是不爭(zhēng)的事實(shí)，但用起來(lái)多少也有些值得考慮的地方：
??????????1:好的js框架都不小，無(wú)論怎么優(yōu)化，怎么壓縮，一般都有幾十K；
??????????2:要想應(yīng)用js框架，首先你要去花一段時(shí)間去學(xué)習(xí)，了解它，往往這個(gè)過(guò)程還有點(diǎn)漫長(zhǎng)，常常看到有的朋友問(wèn)在某某框架中如何實(shí)現(xiàn)某些功能。
??????????3:應(yīng)用js框架，就說(shuō)明你要依賴它，大多開(kāi)發(fā)員只會(huì)應(yīng)用框架本身提供的功能，沒(méi)有的功能就顯得有點(diǎn)吃力，除非你自己的js水平相當(dāng)。
??

????? 我喜歡的做法：看到好的框架中提供了一些不錯(cuò)的功能，我們可以學(xué)著從框架中提取你感興趣的部分，例如prototype在展示圖片的功能就相當(dāng)不錯(cuò)，是有動(dòng)畫效果的，提取出來(lái)后放進(jìn)你整理的js文件中，其它的冗余的js代碼你并不需要。

????? 整理后的所得：
??????? 1:js閱讀能力進(jìn)一步加強(qiáng)。
??????? 2:知道動(dòng)態(tài)注冊(cè)腳本的執(zhí)行時(shí)間，可能發(fā)生在頁(yè)面沒(méi)并沒(méi)有完全加載的情況下。
??????? 3:在js中應(yīng)用了委托。
??????? 4:知道了<script>標(biāo)記中的defer含義及用法。
??????? 5:美化網(wǎng)頁(yè)，提高用戶體驗(yàn)。

???? 更新:實(shí)現(xiàn)OnClientClick="return confirm('確認(rèn)刪除嗎?')"功能。

????????????本來(lái)我的想法是這樣的：???OnClientClick="return IsDelete();",最后發(fā)現(xiàn)回調(diào)完后并不返回結(jié)果。

<script?language?="javascript"?type?="text/javascript">?
//是否刪除?
var?_confirm=false;?
function?IsDelete()?
{?
alert(convert("確定刪除嗎?"),callback);?
return?_confirm;?
}?
function?callback(value)?
{?
if(value=="1")?
{_confirm=?true;}?
}?
</script>?

????

???? 解決方案：OnClientClick='return IsDelete(this.name);'利用__dopostback方法手動(dòng)去觸發(fā)點(diǎn)擊按鈕事件。不知道大家有沒(méi)有更好的解決方案，這個(gè)方案還有一個(gè)問(wèn)題，就是需要設(shè)置頁(yè)面屬性EnableEventValidation ="false",否則會(huì)報(bào)錯(cuò)。

//是否刪除
var?_confirm=false;
//要執(zhí)行的事件
var?sName;
function?IsDelete(_sName)
{
???sName=_sName;
??alert(convert("確定刪除嗎?"),callback);
??return?_confirm;
}
//回調(diào)方法
function?callback(value)
{
??//alert(value);
??if(value=="1")
??{
????_confirm=?true;
????//觸發(fā)事件
????__doPostBack(sName?,null);
????
??}
??
}

????

????? 原因：這次我在作網(wǎng)頁(yè)時(shí)，老感覺(jué)windows自帶的那個(gè)alert功能太過(guò)簡(jiǎn)陋，想到以前學(xué)習(xí)ajax時(shí)，有一個(gè)現(xiàn)成的例子，就想拿過(guò)來(lái)用。代碼全部加起來(lái)不過(guò)100行，用的時(shí)候發(fā)現(xiàn)如下問(wèn)題:
????? 第一：只支持單行文本顯示。
????? 第二：只支持文本提示，不支持帶確認(rèn)按鈕的功能，就相當(dāng)于windows的confirm。

???? 于是從網(wǎng)上再搜索一個(gè)，發(fā)現(xiàn)以上兩點(diǎn)功能都解決了，但有一個(gè)重要問(wèn)題，遮罩層以及html元素都是write出來(lái)的，造成不能屏蔽下拉框以及flash。對(duì)于這種情況如果不動(dòng)手解決的話，很難實(shí)現(xiàn)你要的效果，除非用js框架。

???? 改造過(guò)程：
????? 第一：由于之前的版本很好的解決了下拉框以及flash的屏蔽問(wèn)題，所有就選用它。
??????第二：解決只支持單行文本的限制。原方法的提示內(nèi)容是放在一個(gè)p標(biāo)記中，

var?txt=top.document.createElement("p");//顯示提示內(nèi)容的容器
???txt.style.margin="1em?0"
???txt.setAttribute("id","msgTxt");//設(shè)置id
???txt.innerHTML="<font?color=\"Black\">"+str+"</font>";//設(shè)置提示內(nèi)容

?

????? 我改用div標(biāo)記，然后對(duì)傳入的文本做一個(gè)約束，以\n為分隔符，程序中把所有的\n換成html的換行符<br/>。

//把文件中的換行符換成html的<br/>
???while(str.indexOf("\n")>-1){?
??????str=str.replace("\n","<br\/>");?
????}?
var?txt=top.document.createElement("div");//顯示提示內(nèi)容的容器
???txt.setAttribute('id','divJMAlertContent');
???txt.setAttribute("align","left");
???txt.style.width?=??"60%";

???txt.innerHTML=str;//設(shè)置提示內(nèi)容
???top.document.getElementById("msgDiv").appendChild(txt);//添加提示內(nèi)容

??????

?????? 發(fā)現(xiàn)問(wèn)題：
????????? 1:換行后，文本間距過(guò)大，于是找同事幫忙終于發(fā)現(xiàn)了問(wèn)題所在。原文中由于是顯示一行文本，所有有一個(gè)行間距的設(shè)置：????

msgObj.style.lineHeight?=?(msgh-titleheight)?+?"px";

???????? 修改后的代碼:????

//解決多行文件換行間距大的問(wèn)題
msgObj.style.lineHeight?=?"23px";

?????????? 2:當(dāng)文本行數(shù)較多時(shí)，提示框顯示不全所有的文本，原代碼中設(shè)置了提示框的高度。????

msgh=100;//提示窗口的高度

???????? 修改后的代碼：???????

//根據(jù)文本的行數(shù)改變消息框的高度
????var?iHeight=(str.split('\n').length+1)*23;
????msgObj.style.height?=iHeight?+?"px";

???????

???? ?第三：當(dāng)程序中動(dòng)態(tài)注冊(cè)腳本后報(bào)錯(cuò)，就是點(diǎn)擊一個(gè)服務(wù)器按鈕后，動(dòng)態(tài)執(zhí)行一段代碼：原代碼：?????

string?strmes;
????????????strmes?=?"<script?language='javascript'>alter('aaa');</script>";
????????????Page.ClientScript.RegisterStartupScript(this.GetType(),?"alert",?strmes?);

??????

????????? 原因:在頁(yè)面沒(méi)有完全加載的情況下調(diào)用是document.body.appendChild。修改后的代碼如下：?就是在script標(biāo)記中加上defer屬性，這個(gè)屬性要求這段代碼在頁(yè)面加載完成之后再執(zhí)行。

string?strmes;
????????????strmes?=?"<script?language='javascript'?defer?=\"defer\">firm();</script>";
????????????Page.ClientScript.RegisterStartupScript(this.GetType(),?"alert",?strmes?);

??????????

??????? 第四：增加確認(rèn)和否定按鈕功能。如果只是彈出一個(gè)提示框，那么這種confirm還是那么難看，決定再改造下。

???????? 1:再提示文本div下面來(lái)增加一個(gè)相關(guān)按鈕的div。
???????? 2:增加一個(gè)確認(rèn)按鈕，一個(gè)包含空格字符串的div(為了美化),一個(gè)否定按鈕。
???????? 3:對(duì)外設(shè)置一個(gè)全局變量用來(lái)表明按鈕的值，如點(diǎn)擊確認(rèn)按鈕返回1,否定按鈕返回0。??????????

//按鈕值
var?MB_value?=?-1;

???????? 4:設(shè)置一個(gè)委托，使用戶能根據(jù)返回值調(diào)用相應(yīng)的回調(diào)方法。????????

?//委托方法
var?MB_CALLBACK?=?null;

???????? 5:頁(yè)面調(diào)用代碼，需要寫一個(gè)回調(diào)方法。

//提示用戶是否需要登錄
function?firm()
{
??????alert(convert("您是注冊(cè)用戶嗎？"),callback)
}
function?callback(value)
{
??if(value=="1")
??{
?????//中轉(zhuǎn)到登錄頁(yè)面
?????location.href="/Login.aspx?nextUrl="+escape(window.location.href?);
??}
}

????????

???????? 增加按鈕容器相關(guān)代碼如下：

var?btnDiv=top.document.createElement("div");//顯示相關(guān)按鈕的容器
???btnDiv.setAttribute('id','divJMAlertBtn');
???btnDiv.setAttribute("align","left");
???btnDiv.style.width?=??"60%";
???top.document.getElementById("msgDiv").appendChild(btnDiv);//添加按鈕內(nèi)容
???
???//添加提示按鈕
???//確定按鈕
???var?btnOK=top.document.createElement("input")
????btnOK.setAttribute("id","btnOK");
????//msgBoxTitle.classname="msgbox_title";??
????btnOK.setAttribute("type","button");
????btnOK.setAttribute("value","是");
????btnOK.style.width="30px";
????btnOK.onclick=function(){//單擊確認(rèn)按鈕
????????
????????top.document.body.removeChild(bgObj);
????????top.document.getElementById("msgDiv").removeChild(title);
????????top.document.body.removeChild(msgObj);
????????showSelectBoxes();
????????showObjectFlash();
????????//按鈕賦值
????????MB_value=1;
????????if(MB_CALLBACK!=null)
????????{MB_CALLBACK(MB_value);}
????????
????????}
????????
????top.document.getElementById("divJMAlertBtn").appendChild(btnOK);//添加確認(rèn)按鈕
????
????//中間加一些空格
????var?msgSpace=top.document.createElement("span")
????msgSpace.setAttribute("id","msgSpace");
????msgSpace.innerHTML="&nbsp;&nbsp;&nbsp;";
????top.document.getElementById("divJMAlertBtn").appendChild(msgSpace);
????
????//否按鈕
???var?btnNO=top.document.createElement("input")
????btnNO.setAttribute("id","btnNO");
????//msgBoxTitle.classname="msgbox_title";??
????btnNO.setAttribute("type","button");
????btnNO.setAttribute("value","否");
????btnNO.style.width="30px";
????btnNO.onclick=function(){//單擊否按鈕
????????
????????top.document.body.removeChild(bgObj);
????????top.document.getElementById("msgDiv").removeChild(title);
????????top.document.body.removeChild(msgObj);
????????showSelectBoxes();
????????showObjectFlash();
????????//按鈕賦值
????????MB_value=0;
????????if(MB_CALLBACK!=null)
????????{MB_CALLBACK(MB_value);}
????????
????????}
????????
????top.document.getElementById("divJMAlertBtn").appendChild(btnNO);//添加否按鈕
???

????????

????? 第五：判斷是純顯示提示文本呢，還是顯示一個(gè)帶確認(rèn)的選擇提示框。上面的方法中總會(huì)顯示按鈕，我們可以根據(jù)第二個(gè)參數(shù)是否存在來(lái)做為判斷依據(jù)，如果沒(méi)有回調(diào)方法就認(rèn)為是顯示文本，否則顯示按鈕和文本。
???

???if(MB_CALLBACK==null)
???{?
?????//判斷是否需要顯示確認(rèn)按鈕
?????//如果沒(méi)有回高方法則認(rèn)為不需要顯示按鈕
?????return;
???}

?

??????? 說(shuō)明：本人js及美化都特別差，也只能稍微的修改下別人的作品，對(duì)界面要求高的朋友望見(jiàn)諒。

總結(jié)

以上是生活随笔為你收集整理的动手完善个性化弹出提示框的过程及乐趣的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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