javascript - how to make window.open pop up Modal?

Question

Welcome To Ask or Share your Answers For Others

javascript - how to make window.open pop up Modal?

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - how to make window.open pop up Modal?

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T17:52:31+0000

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>

Categories

javascript - how to make window.open pop up Modal?

javascript - how to make window.open pop up Modal?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags