[轉(zhuǎn)http://www.cnblogs.com/zhouzhaokun/archive/2011/11/14/2248523.html]?

在我們平時(shí)的B/S web開(kāi)發(fā)當(dāng)中，可能很多時(shí)候我們需要有這么一個(gè)場(chǎng)景！某些文本框的值是用戶可以輸入的，也是可以選擇的，比如：新增一篇文章，我們可以指定作者是張三，這樣的話我們可以在文本框中輸入“張三”這個(gè)名字，但是有時(shí)候，我們可能是轉(zhuǎn)載的文章，有可能這個(gè)作者是系統(tǒng)中已經(jīng)存在的，又或者不一定是系統(tǒng)中存在的。這個(gè)時(shí)候我們可以給網(wǎng)編這樣一個(gè)功能：如果作者是系統(tǒng)中已經(jīng)存在的，網(wǎng)編可以點(diǎn)擊某個(gè)連接或者別的什么東西來(lái)從系統(tǒng)中選擇作者，如果作者是系統(tǒng)之外的，網(wǎng)編可以直接輸入作者的姓名。

????? 以上這個(gè)情景完全虛構(gòu)，或者上邊這一段文字在系統(tǒng)設(shè)計(jì)當(dāng)中有問(wèn)題。此刻，我們可以忽略掉。本文重點(diǎn)不再系統(tǒng)設(shè)計(jì)是否合理。

???? 直接上圖：效果圖大致如下：

???? 現(xiàn)在是需求是這樣的：當(dāng)網(wǎng)編點(diǎn)擊超鏈接“選擇的時(shí)候”，我們會(huì)有一個(gè)模態(tài)彈窗蹦出來(lái)讓網(wǎng)編去選擇某個(gè)數(shù)據(jù)。（當(dāng)然這里可以用JS控制彈出DIV來(lái)實(shí)現(xiàn)，也不在本文討論范疇！）

???? 以上情況是，姓名直到體重5個(gè)內(nèi)容 ，網(wǎng)編可以去輸入（如果網(wǎng)編想偷懶，也可以點(diǎn)擊選擇按鈕），也可以選擇。當(dāng)在彈出的模態(tài)窗體中任意一行數(shù)據(jù)上鼠標(biāo)點(diǎn)擊的時(shí)候。返回這一行的數(shù)據(jù)。并且賦值給頁(yè)面中的文本框。

??? 這種效果想想很容易實(shí)現(xiàn)，不過(guò)鑒于本人技術(shù)有限，以前實(shí)現(xiàn)類似功能只能返回一個(gè)數(shù)據(jù)。實(shí)現(xiàn)代碼如下：

//超連接ID為 div , 點(diǎn)擊超鏈接后調(diào)用本JS函數(shù)彈出datalist.aspx //并且關(guān)閉datalist.aspx模態(tài)窗體之后給父頁(yè)面返回一個(gè)string值 //并且賦值給 textbox1 $('#div').click(function() {var result = window.showModalDialog("datalist.aspx", title, 'dialogHeight:300px;dialogWidth:300px ;status:no;help:no');if (typeof (result) != "undefined") {$('#textbox1').val(result);}else {alert("沒(méi)有選擇任何數(shù)據(jù)");return false;} });

接下來(lái)，在 datalist.aspx 頁(yè)面代碼實(shí)現(xiàn)如下：

<tr onclick="returnCode('李四')"><td>李四</td><td>男</td><td>14</td><td>150</td><td>60</td></tr>

由于需要點(diǎn)擊模態(tài)窗體中的任意一行返回?cái)?shù)據(jù)。非點(diǎn)擊某個(gè) “選擇”連接才返回?cái)?shù)據(jù)。所以將 click 事件寫在 tr 中。

JS返回?cái)?shù)據(jù)代碼如下：

<script language="javascript">function returnCode(name) {// if (confirm("您確定選擇此顧客嗎？") != true) {// return;// }window.returnValue = name;window.close();} </script>

當(dāng)在模態(tài)窗體中選擇數(shù)據(jù)之后，關(guān)閉模態(tài)窗體 然后返回選擇的數(shù)據(jù)。。。。

?

到這里，一個(gè)模態(tài)窗體返回?cái)?shù)據(jù)的示例就完成了！不過(guò)這里有個(gè)問(wèn)題。。

如果我需要返回的數(shù)據(jù)是多個(gè)。而并非單純一個(gè)name…..好像我只能將多個(gè)數(shù)據(jù)用特殊符號(hào)比如‘&’或者別的什么分割組裝成一個(gè)字符串來(lái)返回。然后在父頁(yè)面在分拆！

NO。這不是個(gè)好辦法！

?

經(jīng)過(guò)思考以及同事的體系，我做了如下修改：

?

<script language="javascript">function returnCode(name, sex, age, height, weight) {// if (confirm("您確定選擇此顧客嗎？") != true) {// return;// }var jsonData = {};jsonData.name = name;jsonData.sex = sex;jsonData.age = age;jsonData.height = height;jsonData.weight = weight;//alert(jsonData);window.returnValue = jsonData;window.close();} </script>

我在返回之前聲明一個(gè)類似json的數(shù)組。然后給數(shù)組賦值，將json數(shù)據(jù)返回去。比如這里，我返回 name,sex,age,heght,weight 5個(gè)數(shù)據(jù)組成的json數(shù)據(jù)。

html 代碼如下： so easy!

<tr onclick="returnCode('王嫵','女','21','170',90)"><td>王嫵</td><td>女</td><td>21</td><td>170</td><td>90</td> </tr>

如上寫的話。我這個(gè) datalist.aspx 頁(yè)面只管負(fù)責(zé)返回json數(shù)組，數(shù)組里邊放置了所有可能需要返回的內(nèi)容。然后頁(yè)面上你自個(gè)去拿出來(lái)真正需要的數(shù)據(jù)！

JS文件中我在高度封裝一下。再允許我過(guò)度封裝一下：o(∩_∩)o

function Choose(url, title, iWidth, iheight) {/// <summary>/// JS模態(tài)彈窗輔助支持函數(shù)/// </summary>/// <param name="url" type="String">/// 列表頁(yè)面相對(duì)地址/// </param>/// <param name="title" type="String">/// 列表頁(yè)面頁(yè)面標(biāo)題/// </param>/// <param name="iWidth" type="Number">/// 彈窗寬度/// </param>/// <param name="iheight" type="Number">/// 彈窗高度/// </param>/// <returns type="String" />var height = 300;var width = 500;if (iheight != null)height = iheight;if (iWidth != null)width = iWidth;var retvalue;retvalue = window.showModalDialog(url, title, 'dialogHeight:' + height + 'px;dialogWidth:' + width + 'px ;status:no;help:no');return retvalue; }

我把模態(tài)窗體的屬性能提取的盡量都提取出來(lái)做成參數(shù)。

Choose 這個(gè)函數(shù)僅僅是實(shí)現(xiàn)一個(gè)功能。彈出并且返回?cái)?shù)據(jù)。由于 js 是弱語(yǔ)言。var 真是 提供了極大的便利，我管你返回什么類型的數(shù)據(jù)。var 都可以搞定！

因?yàn)橐庋b。我要把這個(gè)函數(shù)做成近可能的公共。近可以的在客戶端減少代碼量。

我們先來(lái)思考一下，要彈出模態(tài)窗口：

1、首先必須得有選擇數(shù)據(jù)的模態(tài)窗體內(nèi)容。以上已經(jīng)解釋如何去做（沒(méi)看明白的同學(xué)翻回去看。）

2、必須得有觸發(fā)這個(gè)事件的對(duì)象

3、我要考慮將值在這個(gè)方法中就賦值給控件

4、還需要一個(gè)高度和寬度。因?yàn)镃hoose()方法雖然提供了默認(rèn)的高度和寬度。但是也提供了這樣可以修改的參數(shù)。

?

以上必備條件基本上算是完備了！但是有個(gè)問(wèn)題。我如何才能在高度封裝的JS函數(shù)中完成對(duì)頁(yè)面文本框的賦值，而且要保證沒(méi)有“嫁錯(cuò)郎”。由于調(diào)用頁(yè)面是未知的世界。我不知道哪個(gè)頁(yè)面要去調(diào)用這個(gè)函數(shù)。并且我不知道他會(huì)傳來(lái)幾個(gè)控件。怎么辦？

好吧！我可以考慮約定一下，你要調(diào)用我這個(gè)函數(shù)來(lái)實(shí)現(xiàn)功能，那好，你傳給我的文本框必須是個(gè)數(shù)組類型的。而且必須有可區(qū)分的“下標(biāo)”。

接下來(lái)我就可以來(lái)封裝了！封裝封裝封裝封封封……裝！

function ChooseDataFromUrl(EventControl, ValueControls, Url, Title, iWidth, iheight) {/// <summary>/// js模態(tài)窗口/// </summary>/// <returns type="Json" />/// <param name="EventControl" type="String">/// 點(diǎn)擊觸發(fā)彈窗的對(duì)象/// </param>/// <param name="ValueControl" type="Elements">/// 要賦值的控件數(shù)組/// </param>/// <param name="Url" type="String">列表頁(yè)面相對(duì)地址</param>/// <param name="Title" type="String">列表頁(yè)面頁(yè)面title標(biāo)題（貌似沒(méi)作用）</param>/// <param name="iWidth" type="Number">彈窗寬度</param>/// <param name="iheight" type="Number">彈窗高度</param>$('#' + EventControl).click(function() {var result = Choose(Url, Title, iWidth, iheight);if (typeof (result) != "undefined") {for (control in ValueControls) {$('#' + ValueControls[control]).val(result[control]);}}else {alert("沒(méi)有選擇任何數(shù)據(jù)");return false;}}); }

以上函數(shù)中有6個(gè)參數(shù)。

1、觸發(fā)函數(shù)事件的對(duì)象

2、要賦值的控件s

3、一個(gè)string的url參數(shù)，這里就是模態(tài)窗體的相對(duì)路徑地址

4、頁(yè)面title（這個(gè)貌似沒(méi)什么用）

5、高度

6、寬度

首先呢，當(dāng)調(diào)用了這個(gè)函數(shù)之后就會(huì)傳進(jìn)來(lái)以上6個(gè)參數(shù)，首先給 觸發(fā)該函數(shù)事件的對(duì)象綁定觸發(fā)條件。

$('#' + EventControl).click(function() { }

其次，調(diào)用Choose函數(shù)返回 var 類型的數(shù)據(jù)。大家知道，這個(gè) Choolse 返回的是個(gè) json 數(shù)組。

接下來(lái)，我要遍歷 控件集合了！我取控件集合的可區(qū)分下標(biāo)來(lái)從模態(tài)窗體中取值并且賦值給控件。

for (control in ValueControls) { $('#' + ValueControls[control]).val(result[control]); }

這部分有點(diǎn)難以理解。看完頁(yè)面調(diào)用就會(huì)豁然開(kāi)朗！

?

頁(yè)面HTML代碼其實(shí)很簡(jiǎn)單：

<body><form id="form1" runat="server"><div>姓名：<asp:TextBox ID="txtName" runat="server"></asp:TextBox><br />性別：<asp:TextBox ID="txtSex" runat="server"></asp:TextBox><br />年齡：<asp:TextBox ID="txtAge" runat="server"></asp:TextBox><br />身高：<asp:TextBox ID="txtHeight" runat="server"></asp:TextBox><br />體重：<asp:TextBox ID="txtweight" runat="server"></asp:TextBox><br /><a href="javascript:;" id="selectEmployee">選擇</a></div></form> </body>

一用jquery庫(kù)，我用的是1.6.2

<script src="../Script/jquery-1.6.2.min.js" type="text/javascript"></script>

js調(diào)用代碼也很簡(jiǎn)單：

<script language="javascript" type="text/javascript">//聲明集合， .后邊的關(guān)鍵字名稱必須和彈窗頁(yè)面返回的json 名稱一致//聲明一個(gè)文本框集合。 var controls = {};controls.name = "<%=txtName.ClientID %>";controls.sex = "<%=txtSex.ClientID %>"controls.age = "<%=txtAge.ClientID %>"new ChooseDataFromUrl("selectEmployee", controls, "showlist.aspx", "選擇員工",500,800);new ChooseDataFromUrl("<%=txtName.ClientID %>", controls, "showlist.aspx", "選擇員工", 800, 500);</script>

以上實(shí)現(xiàn)了2中觸發(fā)ChooseDataFromUrl的事件。第一是點(diǎn)擊“選擇”超鏈接觸發(fā)，另外一種是點(diǎn)擊第一個(gè)，也就是“姓名”文本框觸發(fā)。當(dāng)然也可以在文本框旁邊放個(gè) 小圖標(biāo)來(lái)觸發(fā)咯。

?

?

????? 關(guān)于ASP.NET中服務(wù)器端控件有ClientID和ServerID 引起的代碼混亂，導(dǎo)致無(wú)法在.JS文件中寫直接寫JS代碼的問(wèn)題。用以上 new 傳參的方式可以解決。當(dāng)然，這中方式不是我想出來(lái)的，俺直到現(xiàn)在JS水平還處于下游水平，以前這部分也是我非常頭疼的問(wèn)題。

這樣寫是前段時(shí)間看到老趙博客中對(duì)這部分的介紹才豁然開(kāi)朗的！傳送門！抱歉的是，具體是那篇文章我找不到了。只記得講這一部分的是一個(gè)系列。關(guān)于性能方面！后邊如果我找到了我會(huì)補(bǔ)充上來(lái)！

轉(zhuǎn)載于:https://www.cnblogs.com/ahjxxy/archive/2011/11/14/2249007.html

總結(jié)

以上是生活随笔為你收集整理的window.showModalDialog弹出模态窗口的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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