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

This question is related to javascript jquery popup popupwindow

The answer is


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.


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>    

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.? Simple Popup by using Angular JS how to make window.open pop up Modal? How to handle authentication popup with Selenium WebDriver using Java Show popup after page load How to make popup look at the centre of the screen? How to handle Pop-up in Selenium WebDriver using Java HTML / CSS Popup div on text click How to make a Div appear on top of everything else on the screen? Popup window in winform c# Display UIViewController as Popup in iPhone RegisterStartupScript from code behind not working when Update Panel is used how to make window.open pop up Modal? Add a UIView above all, even the navigation bar How to handle Pop-up in Selenium WebDriver using Java jQuery function to open link in new window Popup window in PHP? How to create a popup window (PopupWindow) in Android Blur or dim background when Android PopupWindow active