Aditya Yenduri Aditya Yenduri - 2 months ago 12
ASP.NET (C#) Question

Window.open() as modal popup behaviour

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?

Answer

There are roughly three parts to this:

  1. 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).

  2. Have clicks on that iframe call focus on the child window.

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