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', '[email protected]');
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.
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', '[email protected]');
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.
Share Improve this question edited May 23, 2017 at 11:57 CommunityBot 11 silver badge asked Jul 27, 2013 at 20:59 user2442489user2442489 2-
You can incorporate answer from this question by creating
<iframe>inside<div id="container">and changingsrcattribute ofiframeinopen()function. – twil Commented Jul 27, 2013 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. – user2442489 Commented Jul 27, 2013 at 21:46
2 Answers
Reset to default 1Updated fiddle from answer in this question with iframe support http://jsfiddle/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
}
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 pleted. 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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744739802a4590960.html
评论列表（0条）