---
title : 使用 jQuery UI Dialog 改寫 showModalDialog()
tags: jQuery UI Dialog、showModalDialog、Chrome
creat-date: 2022-03-29
update_date : 2022-03-29
---
---
## 使用 jQuery UI Dialog 改寫 showModalDialog()
---
:::info
問題：Chrome不支援showModalDialog模態對話方塊，且無法返回returnValue。
使用：jQuery UI Dialog。
使用理由：避免砍掉重練，以最小幅度修改 IE-Only 網頁使其相容 Chrome/Edge 等主流瀏覽器。
:::
### 一、系統功能說明
**點選「關鍵字選擇」按鈕後，跳出「選擇關鍵字欄位」視窗，選取欄位名稱後點選確認，將選取的欄位名稱帶入原始畫面。**
### 二、原本程式碼 (限 IE 使用)
**「關鍵字」欄位內容**
```c#=
<table>
<th>關鍵字</th>
<td>
<input type="text" name="kw" value="<%=Server.HTMLEncode(kw) %>" style="width:120px;" />
<input type="button" value="關鍵字選擇" onclick="OpenKW('500','350');" style="position:relative; top:3px;" /><br>
(關鍵字可搜尋：<span id="spanKW"><%=Server.HtmlEncode(KW_WordField)%></span>)
<input type="hidden" name="KW_WordField" id="KW_WordField" value="<%=Server.HtmlEncode(KW_WordField)%>">
</td>
</table>
```
```javascript=
<script type="text/javascript">
function openKW(W, H) {
var myTextValue = "";
var tmpHiddenItem = document.getElementById("KW_WordField");
var tmpSpanItem = document.getElementById("spanKW");
myTextValue = tmpHiddenItem.value;
var url = "IMPORT.asp?theStep=KW" + "&ViewStateFormId=" + encodeURIComponent(document.thisform.ViewStateFormId.value)
+ "&ViewStateId=" + encodeURIComponent(document.thisform.ViewStateId.value);
var rv = window.showModalDialog(url, myTextValue, "status:false;dialogWidth:" + W + "px;dialogHeight:" + H + "px;scroll:no");
if (rv != null) {
tmpHiddenItem.value = rv;
tmpSpanItem.innerHTML = rv;
}
}
</script>
```
**「選擇關鍵字欄位」視窗，選擇欄位名稱後按「確認」，window.returnValue 回傳值**
```javascript=
<script type="text/javascript">
function goChangeValue() {
var RtVal = "";
var i;
for (i = 0; i < document.forms[0].SJ1.options.length; i++) {
RtVal = RtVal + document.forms[0].SJ1.options[i].value + "、";
}
if (RtVal != "") {
RtVal = RtVal.substring(0, RtVal.length - 1);
}
window.returnValue = RtVal;
window.close();
}
</script>
```
### 三、改版程式碼
**建立 jQuery.showModalDialog 取代 window.showModalDialog，傳入參數包含：url、原本的 dialogArguments 參數、視窗標題、視窗寬度、視窗高度，背後呼叫 jQuery UI dialog 顯示。程式寫成 jquery.showModalDialog.js 方便引用。**
```javascript=
<script type="text/javascript">
if (window.jQuery && !jQuery.showModalDialog) {
let $ = jQuery;
$.dialogArguments = undefined;
$.dialogReturnValue = undefined;
$.dialogInstance = null;
$.showModalDialog = function (url, diagArgs, title, width, height) {
$.dialogReturnValue = undefined;
$.dialogArguments = diagArgs;
let dfd = $.Deferred();
$.dialogInstance = $('<iframe></iframe>')
.attr('src', url)
.css({ width: width, height: height, border: 'none', padding: 0 })
.dialog({
title: title || '',
width: width,
height: height + 50,
position:{at:"center top"},
modal: true,
resize: function(e, ui) { $(e.target).width(ui.size.width); },
open: function(e, ui) { $(e.target).width(width); },
close: function () {
$(this).dialog('destroy').remove();
setTimeout(function() { dfd.resolve(); }, 0); //after closed
}
});
return dfd.promise();
}
$.closeModalDialog = function() {
$.dialogInstance && $.dialogInstance.dialog('close');
}
}
</script>
```
**「關鍵字」欄位內容，需引用相關 js 與 css。**
```c#=
<html>
<head>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="jquery.showModalDialog.js"></script>
</head>
<body>
<table>
<th>關鍵字</th>
<td>
<input type="text" name="kw" value="<%=Server.HTMLEncode(kw) %>" style="width:120px;" />
<input type="button" value="關鍵字選擇" onclick="OpenKW();" style="position:relative; top:3px;" /><br>
(關鍵字可搜尋：<span id="spanKW"><%=Server.HtmlEncode(KW_WordField)%></span>)
<input type="hidden" name="KW_WordField" id="KW_WordField" value="<%=Server.HtmlEncode(KW_WordField)%>">
</td>
</table>
</body>
</html>
```
```javascript=
<script type="text/javascript">
function OpenKW() {
var myTextValue = "";
var tmpHiddenItem = document.getElementById("KW_WordField"); //document.thisform.all("KW_WordField");
var tmpSpanItem = document.getElementById("spanKW");
myTextValue = tmpHiddenItem.value;
var url = "IMPORT.asp?theStep=KW" + "&ViewStateFormId=" + encodeURIComponent(document.thisform.ViewStateFormId.value)
+ "&ViewStateId=" + encodeURIComponent(document.thisform.ViewStateId.value);
$.showModalDialog(
url, //url
myTextValue, //dialogArguments
'選擇關鍵字欄位', //title
500, //width
350 //height
).done(function() {
if ($.dialogReturnValue != undefined) {
tmpHiddenItem.value = $.dialogReturnValue;
tmpSpanItem.innerHTML = $.dialogReturnValue;
}
});
}
</script>
```
**「選擇關鍵字欄位」視窗，選擇欄位名稱後按「確認」，parent.jQuery.dialogReturnValue 回傳值。**
```javascript=
<script type="text/javascript">
function goChangeValue() {
var RtVal = "";
var i;
for (i = 0; i < document.forms[0].SJ1.options.length; i++) {
RtVal = RtVal + document.forms[0].SJ1.options[i].value + "、";
}
if (RtVal != "") {
RtVal = RtVal.substring(0, RtVal.length - 1);
}
parent.jQuery.dialogReturnValue = RtVal; //window.returnValue = RtVal;
parent.jQuery.closeModalDialog(); //window.close();
}
</script>
```
### 四、參考
https://blog.darkthread.net/blog/replace-showmodaldialog/
Sign in with Wallet
Connect another wallet