[轉http://www.cnblogs.com/zhouzhaokun/archive/2011/11/14/2248523.html]?

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

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

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

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

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

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

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

接下來，在 datalist.aspx 頁面代碼實現如下：

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

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

JS返回數據代碼如下：

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

當在模態窗體中選擇數據之后，關閉模態窗體 然后返回選擇的數據。。。。

?

到這里，一個模態窗體返回數據的示例就完成了！不過這里有個問題。。

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

NO。這不是個好辦法！

?

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

?

<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的數組。然后給數組賦值，將json數據返回去。比如這里，我返回 name,sex,age,heght,weight 5個數據組成的json數據。

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數組，數組里邊放置了所有可能需要返回的內容。然后頁面上你自個去拿出來真正需要的數據！

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

function Choose(url, title, iWidth, iheight) {/// <summary>/// JS模態彈窗輔助支持函數/// </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; }

我把模態窗體的屬性能提取的盡量都提取出來做成參數。

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

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

我們先來思考一下，要彈出模態窗口：

1、首先必須得有選擇數據的模態窗體內容。以上已經解釋如何去做（沒看明白的同學翻回去看。）

2、必須得有觸發這個事件的對象

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

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

?

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

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

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

function ChooseDataFromUrl(EventControl, ValueControls, Url, Title, iWidth, iheight) {/// <summary>/// js模態窗口/// </summary>/// <returns type="Json" />/// <param name="EventControl" type="String">/// 點擊觸發彈窗的對象/// </param>/// <param name="ValueControl" type="Elements">/// 要賦值的控件數組/// </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("沒有選擇任何數據");return false;}}); }

以上函數中有6個參數。

1、觸發函數事件的對象

2、要賦值的控件s

3、一個string的url參數，這里就是模態窗體的相對路徑地址

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

5、高度

6、寬度

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

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

其次，調用Choose函數返回 var 類型的數據。大家知道，這個 Choolse 返回的是個 json 數組。

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

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

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

?

頁面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調用代碼也很簡單：

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

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

?

?

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

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

轉載于:https://www.cnblogs.com/ahjxxy/archive/2011/11/14/2249007.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。