How to show a modal pop-up using `window.open`?

Question

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.

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.

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

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

I tried below code to do so:

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

But that did not work.

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.

My code to open a pop up:

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

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.

@Teemu I am using showModalDialog() currently... But it is not supporting in opera. That is why I am finding an alternative.... — Ashish Shah, Jul 17 '14 at 10:51
Well, sMD still seems to be a [part of standard](http://www.w3.org/TR/2013/WD-html51-20130528/webappapis.html#dialogs-implemented-using-separate-documents). If you can't use it, you have to implement your own, using UI Dialog or something similar. — Teemu, Jul 17 '14 at 11:28

score 5 · Answer 1 · answered Oct 14 '14 at 09:13

I was able to make parent window disable. However making the pop-up always keep raised didn't work. Below code works even for frame tags. Just add id and class property to frame tag and it works well there too.

In parent window use:

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

Though @alireza's answer was correct, this is a very nice and suitable answer for the question. — Ashish Shah, Oct 22 '14 at 06:19
@AshishShah Please check my latest approach using ExtJS. Even I was stuck with finding ways to resolve showModalDialog issue with chrome .37 release. As we were not able to compromise on pop-up window being minimized once user clicks on parent window. This lead me put some more effort to find out the way and I felt ExtJS is the best solution for this. Please check my latest post using ExtJS approach. This keeps the pop-up window always raised and allow us to do almost all what showModalDialog use to do. — Pavithra Kudethur, Nov 27 '14 at 05:10

Alireza · Answer 2 · 2014-07-17T10:55:01.440

4

You can't make window.open modal and I strongly recommend you not to go that way. Instead you can use something like jQuery UI's dialog widget.

UPDATE:

You can use load() method:

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

This way it would be faster but the markup will merge into your main document so any submit will be applied on the main window.

And you can use an IFRAME:

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

This is slower, but will submit independently.

edited Jul 17 '14 at 10:55

answered Jul 17 '14 at 10:35

Alireza

4,976
1
23
36

don't feel like it will help me. I want to open an url and then do som actions on that including submitting a form.... I am updating my question and pasting my window.open code... – Ashish Shah Jul 17 '14 at 10:41
you can easily use the `load()` method, or if you prefer use an `IFRAME` inside a `DIV`. Should I update the answer? – Alireza Jul 17 '14 at 10:46
the main window is tottally different. To use this code I have to recode my all and it will take too much time. Because I can't submit the main page. I want to perform actions only in the pop up window. It will do the necessary action in the parent window using window.opener... But can do anything directly in the main window... Thank you so much for looking into this but can you please find me another solution? – Ashish Shah Jul 17 '14 at 12:21
the `IFRAME` model will provide exactly what you want: independent submits. Did you try it? – Alireza Jul 17 '14 at 12:37
thnx for the help alireza... But i solved it differently... By the way thank you very much for the help... Got to learn new thing... thnx... – Ashish Shah Jul 18 '14 at 04:35
actually I set the pop up focus on while creating a pop up in every button. So that when I click any button it reloads the same pop up... It didn't open modal window but as I have mentioned in the question this would also work. And you already know this so didn't post here... :) – Ashish Shah Jul 18 '14 at 13:07

score 3 · Accepted Answer · edited Sep 08 '17 at 21:24

Modal Window using ExtJS approach.

In Main Window

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

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

Unfortunately, ExtJS is a commercial product – Gus Oct 08 '19 at 14:51 — Gus, Oct 08 '19 at 14:51

How to show a modal pop-up using `window.open`?

3 Answers3

Linked