打開jQuery生成的鏈接彈出

我正在重建我的學校舊網站。請不要介意所有的CSS和html亂七八糟，因爲我正忙着這樣做。此外，我不是JavaScript專家，所以...打開jQuery生成的鏈接彈出

現在，我的問題。

該網站爲他們的活動等使用谷歌日曆。在主頁上，有一個側邊欄與即將舉行的活動。我沒有計劃每隔一天更改一次，所以我遇到了這個jQuery，它直接從日曆中提取即將發生的事件。這是載入我的網頁上：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="http://www.sint-jozefscollege.be/gallery3/minislideshow/js/jquery.minislideshow.4.0.min.js"></script> 
<script src="/jquery.gcal_flow.js"></script> 
<script src="/jquery.popupWindow.js"></script>

這是它的外觀：

  <div id="gcf-custom-template"> 
     <div class="gcf-header-block" style=" font-family: verdana; font-size: x-large;"> 
     <div class="gcf-title-block"> 
      <a href="/schoolkalender">Agenda</a> 
     </div> 
     </div> 
     <div class="gcf-item-container-block" style=" font-size: 12px; margin-top: 8px;"> 
     <div class="gcf-item-block"> 
      <div class="gcf-item-header-block" style=" font-size: 14px; margin-top: 8px;"> 
<div class="gcf-item-title-block"> 
       <a class="gcf-item-link"><span class="gcf-item-daterange">00/00</span></a> 
       <strong class="gcf-item-title" style=" float: right; width: 150px;">Item Title of Your event 
</strong> 
      <div style="display: block; clear: both;"></div> 
</div> 
      </div> 
     </div> 
     </div> 
    </div>

通過以上的東西來此腳本：

<script type="text/javascript"> 
    $('#gcf-custom-template').gCalFlow({ 
    calid: 'jb1p8523dur2d9qtrf0d2demcg%40group.calendar.google.com', 
    maxitem: 4, 
    mode: 'upcoming', 
    daterange_formatter: function (start_date, allday_p) { 
    function pad(n) { return n < 10 ? "0"+n : n; } 
    return pad(start_date.getDate() + "/" + pad(start_date.getMonth()+1)) + ":"; 
    } 
    }); 
</script>

現在，我想獲取「項目標題的事件」中產生的鏈接以在新標籤中打開。我試圖用這個腳本：

<script type="text/javascript"> 
$('#link').popupWindow({ 
    height:500, 
    width:800, 
    top:50, 
    left:50 
    }); 
</script>

我修改了jquery.gcal_flow.js文件中加入「ID =‘鏈接’」的鏈接，但它不會工作。如果我嘗試使用另一個未生成的鏈接，它工作得很好。

任何幫助將受到歡迎！ PS：一切的頁面：http://www.sint-jozefscollege.be/calendar1.html

編輯：實施解決方案可在http://www.sint-jozefscollege.be

來源

2012-11-17 niknetniko

我說你的問題是，當你的腳本綁定popupWindows運行環節都沒有發生。因此，事件永遠不會受到約束。該插件似乎不支持委派事件，但您始終可以手動創建彈出窗口，並使用.on()委派事件。

$(function() { 
    $('body').on('click', '.link', function(e) { 
     e.preventDefault(); 
     new_window = window.open($(this).attr('href'),'','height=500,width=800'); 
    }); 
});

您還會注意到2件事。首先，是我把代碼放在jQuery ready function。你應該總是把所有與jQuery相關的代碼放在ready函數中。其次，我用.link而不是#link。 ID只能在文檔中使用一次，如果您需要多次使用它們，請改爲使用類。

來源

2012-11-17 12:45:47

謝謝！這工作就像一個魅力（我添加'身體標籤周圍，因爲我希望它能夠在整個頁面上工作）！ – niknetniko

啊，是的，我錯過了。我的錯誤。我已經更新了答案:) –

打開jQuery生成的鏈接彈出

回答

相關問題