I have a requirement in which I need to open a popup window from the parent window. I am able to do that successfully.
Now what I am trying to do is- Suppose a popup window is open and there is some link in that popup window and If I try to click that link, it should open that link in a new window and the original popup window should get closed.
This is the fiddle I have. In this fiddle if you click on apply button then it will open a popup window which is working fine but if you click on any link in that popup window then that link gets opened in the same popup window which is what I don't want. I want to open that link in a new external window and that original popup window should get closed.
Below is the JS code-
function open(url) {
$('#blockdiv').fadeIn();
$('#iframe').attr('src', url);
$('#containerdiv').fadeIn();
}
function close() {
$('#blockdiv').fadeOut();
$('#containerdiv').fadeOut();
}
$(document).ready(function() {
$('ul').css({width: $('#containerdiv').width(),height: $('#containerdiv').height()})
$('#close').click( function() { close() })
$('.JN_apply').click( function() { open($(this).data('url')); })
});
The example that I have given in the fiddle will open www.ebay.com website but in general it will be my page that will get opened as the Popup window.
Is it possible to do? If yes, can anybody help me with that?
Updated Code:-
Now I have started using jQuery colorbox to do the same above thing-
Below is my parent window code that will open the popup window-
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Colorbox Examples</title>
<style>
body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
h2{font-size:13px; margin:15px 0 0 0;}
</style>
<link rel="stylesheet" href="C:\Users\rj\Downloads\colorbox-master\example4\colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="C:\Users\rj\Downloads\colorbox-master\jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
});
</script>
</head>
<body>
<h2>Other Content Types</h2>
<p><a class='iframe' href="http://www.wikipedia.com">Outside Webpage (Iframe)</a></p>
</body>
</html>
And below is my popup window code which will have one link that I need to open in a new external window by closing the original popup window-
<html>
<head>
<title>Apply</title>
</head>
<body>
<script>
function getUrlParameters() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
var id = getUrlParameters()["ID"];
var title = getUrlParameters()["Title"];
var id = unescape(id);
var title = unescape(title);
var myJScript = document.createElement('script');
myJScript.setAttribute('type', 'Apply');
myJScript.setAttribute('data-companyId', '40');
myJScript.setAttribute('data-jobTitle', id );
myJScript.setAttribute('data-email', 'admin@domain.net');
document.body.appendChild(myJScript);
</script>
<hr>
<input name="Apply Online" type="button" id="Apply Online" value="Apply Online" ONCLICK="window.location.href='some_url'">
</body>
</html>
Now how to close the popup window in this case after clicking Apply Online link and Apply Online link should get opened in a new external window? I hope the question should be clear enough.
