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

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

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

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

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

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

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

//超連接ID為 div , 點擊超鏈接后調(diào)用本JS函數(shù)彈出datalist.aspx //并且關閉datalist.aspx模態(tài)窗體之后給父頁面返回一個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("沒有選擇任何數(shù)據(jù)");return false;} });

接下來，在 datalist.aspx 頁面代碼實現(xiàn)如下：

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

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

JS返回數(shù)據(jù)代碼如下：

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

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

?

到這里，一個模態(tài)窗體返回數(shù)據(jù)的示例就完成了！不過這里有個問題。。

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

NO。這不是個好辦法！

?

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

?

<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>

我在返回之前聲明一個類似json的數(shù)組。然后給數(shù)組賦值，將json數(shù)據(jù)返回去。比如這里，我返回 name,sex,age,heght,weight 5個數(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>

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

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

function Choose(url, title, iWidth, iheight) {/// <summary>/// JS模態(tài)彈窗輔助支持函數(shù)/// </summary>/// <param name="url" type="String">/// 列表頁面相對地址/// </param>/// <param name="title" type="String">/// 列表頁面頁面標題/// </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)窗體的屬性能提取的盡量都提取出來做成參數(shù)。

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

因為要封裝。我要把這個函數(shù)做成近可能的公共。近可以的在客戶端減少代碼量。

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

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

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

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

4、還需要一個高度和寬度。因為Choose()方法雖然提供了默認的高度和寬度。但是也提供了這樣可以修改的參數(shù)。

?

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

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

接下來我就可以來封裝了！封裝封裝封裝封封封……裝！

function ChooseDataFromUrl(EventControl, ValueControls, Url, Title, iWidth, iheight) {/// <summary>/// js模態(tài)窗口/// </summary>/// <returns type="Json" />/// <param name="EventControl" type="String">/// 點擊觸發(fā)彈窗的對象/// </param>/// <param name="ValueControl" type="Elements">/// 要賦值的控件數(shù)組/// </param>/// <param name="Url" type="String">列表頁面相對地址</param>/// <param name="Title" type="String">列表頁面頁面title標題（貌似沒作用）</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("沒有選擇任何數(shù)據(jù)");return false;}}); }

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

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

2、要賦值的控件s

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

4、頁面title（這個貌似沒什么用）

5、高度

6、寬度

首先呢，當調(diào)用了這個函數(shù)之后就會傳進來以上6個參數(shù)，首先給 觸發(fā)該函數(shù)事件的對象綁定觸發(fā)條件。

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

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

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

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

這部分有點難以理解。看完頁面調(diào)用就會豁然開朗！

?

頁面HTML代碼其實很簡單：

<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庫，我用的是1.6.2

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

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

<script language="javascript" type="text/javascript">//聲明集合， .后邊的關鍵字名稱必須和彈窗頁面返回的json 名稱一致//聲明一個文本框集合。 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>

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

?

?

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

這樣寫是前段時間看到老趙博客中對這部分的介紹才豁然開朗的！傳送門！抱歉的是，具體是那篇文章我找不到了。只記得講這一部分的是一個系列。關于性能方面！后邊如果我找到了我會補充上來！

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

總結

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

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