2013-07-28 153 views
1

我有一個需要從父窗口打開彈出窗口的要求。我能夠成功地做到這一點。從外部窗口的彈出窗口打開鏈接,然後關閉原始彈出窗口

現在我想要做的是 - 假設一個彈出窗口打開,並在該彈出窗口中有一些鏈接,如果我嘗試點擊該鏈接,它應該在新窗口中打開該鏈接,並且原始彈出窗戶應該關閉。

這是我的fiddle。在這個小提琴中,如果你點擊應用按鈕,那麼它將打開一個彈出窗口,它工作正常,但是如果你點擊該彈出窗口中的任何鏈接,那麼該鏈接會在同樣的彈出窗口中打開,這是我不想要的。我想在一個新的外部窗口中打開該鏈接,並且該原始彈出窗口應該關閉。

下面是JS代碼 -

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')); }) 

}); 

,我的小提琴給打開www.ebay.com網站,但總的來說這將是我的網頁,將獲得作爲打開彈出窗口中的例子。

可以嗎?如果是的話,任何人都可以幫助我嗎?

更新的代碼: -

現在我已經使用jQuery顏色框做的東西─

小於上述相同的開始是我的父窗口的代碼,將打開彈出式窗口 -

<!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> 

下面是我的彈出窗口代碼,它將有一個鏈接,我需要通過關閉原始彈出窗口在新的外部窗口中打開 -

<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', '[email protected]'); 

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> 

現在如何在這種情況下關閉彈出窗口後點擊應用在線鏈接和在線申請鏈接應該打開一個新的外部窗口?我希望這個問題應該足夠清楚。

+0

這隻會是可能的,如果在iframe頁面是你的,你處理click事件裏面你的鏈接 –

+0

_blank? –

+0

但是,如何打開一個新的外部窗口後關閉原始彈出窗口? – ferhan

回答

2

嘗試

<input name="Apply Online" type="button" id="Apply Online" value="Apply Online" ONCLICK="window.location.href='some_url';$.colorbox.close();">

<input name="Apply Online" type="button" id="Apply Online" value="Apply Online" ONCLICK="window.location.href='some_url';parent.$.colorbox.close();">

+0

我嘗試了上面的代碼,但不知何故彈出窗口沒有接近。在開始使用前,需要更改上述代碼中的任何內容嗎? – ferhan

+0

也許你需要將'$'改爲'jQuery'。所以''.colorbox.close()'會變成'jQuery.colorbox.close()'。 – Peter

相關問題