Window.open() as modal popup behaviour

Question

As window.showmodaldialog is depreciated in chrome, So I am using window.open() instead. But the problem is that after opening Child window I want my parent window to be disabled and if I click on Parent window it should focus on child window.

I tried with some body attributes like onmouseover, onclick events it is working to some extent but if there is any button on parent and if I click its respective event is getting invoked.

For now I am disabling the parent window events as below when I am opening Child window.

$('body').css({ 'opacity': 0.3, 'pointer-events': 'none' })

and after closing child window to resume

 $('body').css({ 'opacity': 1, 'pointer-events': 'auto' });

Now my question is when I click on Parent window, how can I focus on child?

score 1 · Accepted Answer · edited May 23 '17 at 10:27

There are roughly three parts to this:

When you open the child window, put a full-page iframe on top of the parent window. This answer has an explanation and example (using jQuery; I note you're using jQuery in the question).
Have clicks on that iframe call focus on the child window.
On unload of the child window, remove the iframe.

Just in case that other answer disappeared for any reason, here's the example in it:

HTML:

<input type='button' id='btnPopup' value='Click for Pop-Up'>
<p>This is text on the page</p>
<p>This is text on the page</p>
<p>This is text on the page</p>
<p>This is text on the page</p>
<p>This is text on the page</p>

JavaScript:

jQuery(function($) {
  $('#btnPopup').click(function() {
    $("<iframe id='shim' src='http://output.jsbin.com/abira4/1'>").css({
      width: "100%",
      height: "100%",
      position: "absolute",
      left: "0px",
      top: "0px",
      zIndex: "100",
      backgroundColor: "#fff",
      opacity: "0.5"
    }).appendTo(document.body);
    $("<div>Hi there, click me to dismiss</div>").css({
      zIndex: "101",
      border: "1px solid black",
      backgroundColor: "#ecc",
      position: "absolute",
      left: "100px",
      top: "100px"
    }).appendTo(document.body)
      .click(function() {
        $(this).remove();
        $("#shim").remove();
      });
  });
});

(http://output.jsbin.com/abira4/1 is just a blank page.)

Live Example - Again, this is just #1 of the above, you'll need to add #2 and #3.

Thanks. Using iframe and its click events I am able to control my child window focus. — Aditya Yenduri, Sep 20 '16 at 09:23

Window.open() as modal popup behaviour

1 Answers1