2014-12-04 179 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

相关问题