title: open the link from the popup window in an external window and then close the original popup window
body: <p>I have a requirement in which I need to open a popup window from the parent window. I am able to do that successfully.</p>
  
  <p>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.</p>
  
  <p>This is the <a href="http://jsfiddle.net/p3wgm/5/" rel="nofollow">fiddle</a> 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.</p>
  
  <p>Below is the JS code-</p>
  
  <pre><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')); })
  
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>Is it possible to do? If yes, can anybody help me with that?</p>
  
  <p><strong>Updated Code:-</strong></p>
  
  <p>Now I have started using jQuery colorbox to do the same above thing-</p>
  
  <p>Below is my parent window code that will open the popup window-</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset='utf-8'/&gt;
          &lt;title&gt;Colorbox Examples&lt;/title&gt;
          &lt;style&gt;
              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;}
          &lt;/style&gt;
          &lt;link rel="stylesheet" href="C:\Users\rj\Downloads\colorbox-master\example4\colorbox.css" /&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="C:\Users\rj\Downloads\colorbox-master\jquery.colorbox.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $(document).ready(function(){
                  //Examples of how to assign the Colorbox event to elements
                  $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
  
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h2&gt;Other Content Types&lt;/h2&gt;
          &lt;p&gt;&lt;a class='iframe' href="http://www.wikipedia.com"&gt;Outside Webpage (Iframe)&lt;/a&gt;&lt;/p&gt;
  
          &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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-</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Apply&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;script&gt;
  function getUrlParameters() {
      var vars = {};
      var parts = window.location.href.replace(/[?&amp;]+([^=&amp;]+)=([^&amp;]*)/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); 
  &lt;/script&gt;
  &lt;hr&gt;
  
  &lt;input name="Apply Online" type="button" id="Apply Online" value="Apply Online" ONCLICK="window.location.href='some_url'"&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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.</p>