CODEWITHSUNDEEP
javascriptjquerypopuppopupwindow
Ashish Shah
Ashish Shah

Reputation: 152

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

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.

Upvotes: 9

Views: 129327

Answers (3)

Pavithra Kudethur
Pavithra Kudethur

Reputation: 96

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>

Upvotes: 3

Pavithra Kudethur
Pavithra Kudethur

Reputation: 96

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>

Upvotes: 5

Alireza
Alireza

Reputation: 5056

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.

Upvotes: 4

Related Questions