Gray and disable out the parent window as soon as pop up window is opened

Question

I am trying to disable the Parent window as soon as the child window is opened. I would like to gray out the parent window whenever pop window is opened.

Below is my popup window code-

<html>
<head>
    <title>Applying</title>
</head>
<body>

<script>
function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, 
        function(m,key,value) {
            vars[key] = value;
        });
    return vars;
}
var variable1 = getUrlVars()["parameter1"];    

var myScript = document.createElement('script');

myScript.setAttribute('type', 'text/javascript');
myScript.setAttribute('urlId', '420');
myScript.setAttribute('dataTitle', variable1);
myScript.setAttribute('dataemail', 'admin@domain.net');

document.body.appendChild(myScript);                              
</script>

<input name="Apply" type="button" id="Apply" value="Apply" ONCLICK="window.location.href='some_url'">
</body>
</html>

Below is my Parent window code-

<html>

<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- 
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=550,height=650,left = 570,top = 300');");
}
</script>
<input type=button value="Apply" onClick="javascript:popUp('popup_window_url')">
</body>
</html>

What's the best and easy way to disable the parent window here? Any example with my above code will help me a lot in understanding a simple example.

I saw various other post on the stackoverflow but I am not able to understand how to incorporate those things here in my code. I am trying to do something like this.

Any suggestions will be of great help.

You can incorporate answer from [this](http://stackoverflow.com/questions/10679283/gray-out-parent-window-when-child-window-is-up) question by creating `` inside `<div id="container">` and changing `src` attribute of `iframe` in `open()` function.</div> — twil, Jul 27 '13 at 21:44
Before posting it here, that is the only post I saw earlier. But somehow, I am not able to do the same thing in my code. If you can provide any simple example basis on my code then that will help a lot. Sorry, as I am totally new to jQuery stuff. — , Jul 27 '13 at 21:46

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

Updated fiddle from answer in this question with iframe support http://jsfiddle.net/LT5JC/

Open function is rather simple

function open(url) {
    $('#block').fadeIn(); // show grayed pane
    $('#iframe').attr('src', url); // update src of iframe
    $('#container').fadeIn(); // show container with iframe
}

edited May 23 '17 at 11:57

Community

1
1

answered Jul 27 '13 at 21:58

twil

6,032
1
30
28

score 0 · Answer 2 · edited May 23 '17 at 12:20

The example you gave doesn't use a popup in the sense of a new browser window, but a div on the existing page onto which the new content is loaded. This method is possible, as you would use an Ajax call to populate your popup. By using an Ajax call to the second page, you are able to tell when the request has finished, and fade the background out as required. If you really want to, you could use an iFrame, and check when that's loaded, but in my opinion this method isn't as nice.

A simple implementation using jQuery:

var cover = $("<div id='cover'></div>");
var content = $("#content"),
    popup_window = $("#popup-window"),
    popup_launcher = $("#popup-launch");

// When we click a button, load our new content into our popup
// and fade the window in once the request has completed. Also,
// fade our cover in, thus restricting the user from clicking the content beneath
popup_launcher.on("click", function() {
    popup_window.load(child_url, function() {
        popup_window.fadeIn();
        content.fadeIn(cover);
    });
});
// When a close button is clicked inside the popup window, fade it out.
popup_window.on("click", ".close", function() {
    popup_window.fadeOut();
    cover.fadeOut();
});

CSS

#cover {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:2;
    display:none;
    background:RGBA(0,0,0,0.5);
}
#popup-window {
    position:fixed;
    left:30%;
    right:30%;
    top:30%;
    bottom:30%;
    z-index:3;
}

Very simple example, but our #cover has to be positioned beneath our #popup-window, so we use the z-index property to ensure this.

Edit - whilst the Ajax method would be nicer, bear in mind that due to HTTP access control, you'll only be able to request pages on the same domain (generally), so if you need to open external resources, you'll probably need to use an iFrame solution.

Gray and disable out the parent window as soon as pop up window is opened

2 Answers2