Question

我目前正在使用window.showModalDilog打开一个模式弹出窗口，该窗口不允许父窗口执行任何操作。

但是在Google搜索中，我发现它不是标准方法，并且各种浏览器已停止支持此功能。

事实上我在Opera中遇到了这个问题。 Opera给了我javascript错误并在那时停止执行。在那次错误之后什么都不会发生。

所以，我只剩下一个选项，那就是window.open。

但我想禁用父窗口（同样在showModalDilog中）。

我尝试使用以下代码：

<script type="text/javascript">
            $(window).load(function() {
                window.opener.document.body.disabled=true;
            });

            $(window).unload(function() {
                window.opener.document.body.disabled=false;
            });
</script>

但我在这方面失败了。

任何人都可以向我推荐代码，以便我可以让window.open弹出Modal吗？

希望我已经很好地解释了我的问题。如果您需要更多信息，请询问我。

提前谢谢....

更新

我想在弹出窗口中打开一个Url，然后在打开网址后执行某些操作，包括提交表单。

我打开弹出窗口的代码：

window.open("https://www.picpixa.com/wp-content/plugins/create-own-object/plugin-google-drive/index.php", "socialPopupWindow",
                "location=no,width=600,height=600,scrollbars=yes,top=100,left=700,resizable = no");

请帮助我....

更新1：

如果我只需点击多个按钮就可以打开一个弹出窗口，这对我也有帮助。我的意思是如果我点击btn1弹出名为“temp”的应该打开。但是当我点击btn2然后不再打开一个新的弹出“temp”将重新加载。如果你能给我这个建议，它也可以帮助我解决80％的问题。

Answer 1

我能够禁用父窗口。然而，总是提高弹出窗口并不起作用。下面的代码甚至适用于帧标签。只需将id和class属性添加到帧标记中，它也可以很好地工作。

在父窗口中使用：

<head>    
<style>
.disableWin{
     pointer-events: none;
}
</style>
<script type="text/javascript">
    function openPopUp(url) {
      disableParentWin(); 
      var win = window.open(url);
      win.focus();
      checkPopUpClosed(win);
    }
    /*Function to detect pop up is closed and take action to enable parent window*/
   function checkPopUpClosed(win) {
         var timer = setInterval(function() {
              if(win.closed) {
                  clearInterval(timer);                  
                  enableParentWin();
              }
          }, 1000);
     }
     /*Function to enable parent window*/ 
     function enableParentWin() {
          window.document.getElementById('mainDiv').class="";
     }
     /*Function to enable parent window*/ 
     function disableParentWin() {
          window.document.getElementById('mainDiv').class="disableWin";
     }

</script>
</head>

<body>
<div id="mainDiv class="">
</div>
</body>

Answer 2

你无法制作window.open模态，我强烈建议你不要这样做。相反，您可以使用类似jQuery UI's dialog widget的内容。

更新：

您可以使用load()方法：

$("#dialog").load("resource.php").dialog({options});

这样会更快但标记会合并到主文档中，因此任何提交都将应用于主窗口。

你可以使用IFRAME：

$("#dialog").append($("<iframe></iframe>").attr("src", "resource.php")).dialog({options});

速度较慢，但会独立提交。

Answer 3

使用ExtJS方法的模态窗口。

在主窗口中

<html>
<link rel="stylesheet" href="ext.css" type="text/css">
<head>    
<script type="text/javascript" src="ext-all.js"></script>

function openModalDialog() {
    Ext.onReady(function() {
        Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: Ext.getBody().getViewSize().height*0.8,
        width: Ext.getBody().getViewSize().width*0.8,
        minWidth:'730',
        minHeight:'450',
        layout: 'fit',
        itemId : 'popUpWin',        
        modal:true,
        shadow:false,
        resizable:true,
        constrainHeader:true,
        items: [{
            xtype: 'box',
            autoEl: {
                     tag: 'iframe',
                     src: '2.html',
                     frameBorder:'0'
            }
        }]
        }).show();
  });
}
function closeExtWin(isSubmit) {
     Ext.ComponentQuery.query('#popUpWin')[0].close();
     if (isSubmit) {
          document.forms[0].userAction.value = "refresh";
          document.forms[0].submit();
    }
}
</head>
<body>
   <form action="abc.jsp">
   <a href="javascript:openModalDialog()"> Click to open dialog </a>
   </form>
</body>
</html>

在popupWindow 2.html

中

<html>
<head>
<script type="text\javascript">
function doSubmit(action) {
     if (action == 'save') {
         window.parent.closeExtWin(true);
     } else {
         window.parent.closeExtWin(false);
     }   
}
</script>
</head>
<body>
    <a href="javascript:doSubmit('save');" title="Save">Save</a>
    <a href="javascript:doSubmit('cancel');" title="Cancel">Cancel</a>
</body>
</html>

如何制作window.open弹出Modal？

3 个答案: