谷歌浏览器非模态对话框的创建和jQuery子窗口如何给父窗口传值

刺骨的言语ヽ痛彻心扉 2022-05-14 04:21 286阅读 0赞

谷歌浏览器不支持模态对话框了，而原来的项目中，又使用了模态对话框的语句：showModalDialog，这样原来的项目就用不成模态对话框了。

为了不对项目做大的改变，只好写一个临时的showModalDialog函数，代替原来的对话框。

第一步：写一个判断浏览器还能否使用showModalDialog的代码

$(function()\{  
if(window.showModalDialog == undefined) \{  
window.showModalDialog = function(url, mixedVar, features) \{  
window.hasOpenWindow = true;  
if(mixedVar)  
var mixedVar = mixedVar;  
if(features)  
var features = features.replace(/(dialog)|(px)/ig, "").replace(/;/g, ',').replace(/\\:/g, "=");  
window.myNewWindow = window.open(url, "\_blank", features);  
\}  
\}  
\})

－－－－－－－－－－－－－－－－－－

第二步：写一个对话框的调用代码

$(function()\{

$("\#dlg").click(function()\{  
var iWidth = 500;  
var iHeight = 300;  
var iTop = (window.screen.availHeight - 30 - iHeight) / 2;  
var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;  
var win = window.showModalDialog("b.html", "弹出窗口", "width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft + ",status=no;help=no;scrollbars=no");  
$('\#p1t').val(win);  
\});  
\});

如果想传入多个值，可以使用json数据的格式：

\}  
</script>

－－－－－－－－－－－－－－－－－－－

第三步：在子窗口中写一个写主窗口值的函数

function a() \{  
var couponName = $('\#backname').val();  
if(window.opener != undefined) \{  
//for chrome  
window.opener.returnValue = couponName;  
\} else \{  
window.returnValue = couponName;  
\}  
window.opener.document.getElementById('p1t').value=couponName;  
window.close();

－－－－－－－－－－－－－－－－－－－－－－－－－－

完整主窗口代码如下：

<html>

<head>  
<meta charset="utf-8" />  
<title>无标题页</title>  
<script src="js/jquery-3.2.1.js"></script>  
<script language="javascript" type="text/javascript">  
$(function()\{  
if(window.showModalDialog == undefined) \{  
window.showModalDialog = function(url, mixedVar, features) \{  
window.hasOpenWindow = true;  
if(mixedVar)  
var mixedVar = mixedVar;  
if(features)  
var features = features.replace(/(dialog)|(px)/ig, "").replace(/;/g, ',').replace(/\\:/g, "=");  
window.myNewWindow = window.open(url, "\_blank", features);  
\}  
\}  
\})

$(function()\{

</script>  
</head>

</html>

－－－－－－－－－－－－－－－－－－－－－－－－－－－

完整子窗口的代码如下：

<html>

\}  
</script>  
</head>

</html>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－