如何使用`window.open`显示模式弹出窗口?

2022-01-20 00:00:00 popup jquery javascript popupwindow

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

I am currently using window.showModalDilog to open a modal pop up window which is not allowing the parent window to do any action.

但是通过谷歌搜索发现不是标准方法，各种浏览器已经停止支持这个功能.

But through Google search, I found that it is not the standard method and various browsers has stopped supporting this function.

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

In fact I am facing this problem in Opera. Opera gives me a Javascript error and stops execution at that point. Nothing can happen after that error.

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

So, I have only one option left and that is window.open.

但我想禁用父窗口(同样在 showModalDilog 中).

But I want to disable parent window (likewise in showModalDilog).

我尝试了以下代码:

$(window).load(function() {
    window.opener.document.body.disabled=true;
});
    
$(window).unload(function() {
    window.opener.document.body.disabled=false;
});

但这没有用.

我想在弹窗中打开一个网址，然后在打开网址后做一些动作，包括提交表单.

I want to open an URL in the pop-up window and then do certain actions after the URL is opened, including submitting a form.

我打开弹窗的代码:

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");

如果我可以在单击多个按钮时仅打开一个弹出窗口，那也会有所帮助.我的意思是如果我点击btn1"一个名为temp"的弹出窗口；将打开.但是如果我点击btn2"然后不是打开一个新的弹出窗口temp"；应该重新加载.

It would also help if I could open only one pop-up window on the clicking of multiple buttons. I mean if I click on "btn1" a pop-up named "temp" shall open. But if I click on "btn2" then instead of opening a new pop up "temp" shall reload.

推荐答案

Modal Window 使用 ExtJS 方法.

Modal Window using ExtJS approach.

在主窗口中

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

In popupWindow 2.html

<html>
<head>
<script type="textjavascript">
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>

相关文章