2014-12-04 223 views
0

我已經有一個顯示事件的周視圖日曆(使用fullcalendar)。當點擊一個事件時,popover顯示就像我也想要的一樣。但是,當我單擊另一個事件時,會彈出一個新的彈出窗口,而前一個彈出窗口仍然可見。目前,我必須再次點擊該活動才能關閉彈出窗口。我希望在新的彈出窗口打開後自動關閉先前的彈出窗口。它可行嗎?下面顯示了用於顯示彈出窗口的代碼。到目前爲止,我已經嘗試了一種「檢測機制」來確定是否有可見的彈出窗口,然後在顯示新窗口之前關閉它們。雖然我沒有運氣讓它工作。我似乎也無法讓其他論壇(甚至是在這裏的stackoverflow)的建議工作。如何在同時關閉已打開的彈出窗口時打開彈出窗口

//calendar.js

eventClick: function (calEvent, jsEvent, view) { 
    var pcontent = ""; 
    pcontent += "<h5 class=semibold>"; 
    pcontent += "<img class='mr10' src='images/bloggingservices.png' width='42' height='42' />"; 
    pcontent += calEvent.title; 
    pcontent += "</h5>"; 
    pcontent += "<hr/>"; 
    pcontent += "<p class=''><span class='ico-clock'></span> Time: "; 
    pcontent += $.fullCalendar.moment(calEvent.start).format('hh:mm'); 
    pcontent += " - "; 
    pcontent += $.fullCalendar.moment(calEvent.end).format('hh:mm'); 
    pcontent += "</p>"; 

    $('.popover.in').remove(); // adding this line works for me 

    $(this).popover({ 
     placement: "bottom", 
     html: true, 
     trigger: "manual", // I already tried changing the trigger to "focus" but it didn't work 
     content: pcontent 
    }).popover("toggle"); 


    // $(this).not(this).popover('hide');  
    } 

回答

0

您可以讓所有的酥料餅的元素通過使用屬性選擇器與屬性數據,撥動=「酥料餅」關閉所有酥料餅,除了點擊一個並隱藏所有通過比較每個元素與event.target - 當前元素被點擊時的彈出窗口 - 除了當前彈出窗口之外的彈出窗口。

$('[data-toggle="popover"]').popover().on('click', function (e) { 
    //select all popover in the page and loop through 
    $('[data-toggle="popover"]').each(function (i,item) { 
     //compare each element with the current element 
     if(item != e.target) 
      $(item).popover("hide"); 
    }); 
}); 

這不是有效的方法。仍然適用於快速解決方案 JS FIDDLE DEMO

+0

日曆上的事件放置在按鈕上,但放在div上。所以看來我無法使用你的建議。我設法找到了符合我要求的解決方案。在顯示彈出窗口之前,我放置了這個代碼,$('。popover.in')。remove();,。 – user3052644 2014-12-04 06:49:10

相關問題