how to make window.open pop up Modal?

Ashish Shah picture Ashish Shah · Jul 17, 2014 · Viewed 109.8k times · Source

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 in the 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 the 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:

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

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

But I failed in this.

Can any one suggest me the code so that I can make window.open pop up Modal?

Hope I have explained my question well. Please ask me if you need more information.

Thank You in advance....

Update:

I want to open an Url in the pop up window and then do certain action 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");

Please help me....

Update 1:

It would also help me if I can open only one pop up window on the clicking of multiple buttons. I mean If i click on btn1 pop up named "temp" shall open. But when I click btn2 then instead of opening a new pop up "temp" shall reload. If you can give me suggestion on this, it would also help me to solve 80 percent problem.

Answer

Pavithra Kudethur picture Pavithra Kudethur · Oct 14, 2014

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>