完整日历中的流行音乐不会被解雇 [英] popover in fullcalendar not getting dismissed

问题描述

我必须在单击事件时打开弹出窗口，如果您单击事件之外的任何位置，该弹出窗口应该会被取消，因此我将弹出窗口与焦点触发器一起使用时，在事件外部单击时不会被取消

以下是我使用的js代码

$(document).ready(function () {

// page is now ready, initialize the calendar...
var eventsArray = [ {
    title: 'Test2',
    start: new Date("2015-04-21")
}];

$('#calendar').fullCalendar({
    // put your options and callbacks here
    header: {
        left: '', //today',
        center: 'title',
        right: ''
    },
    defaultView: 'agendaDay',
    defaultDate: '2015-04-21',
    editable: true,
    allDaySlot: false,
    selectable: true,
    events: eventsArray,
    eventClick: function(calEvent, jsEvent, view) {
       $(this).popover({
        placement : 'bottom',
        title : 'Appointment Actions',
        html : true,
        content :"test",
        trigger : 'focus'

    }).popover('show');
        $(this).attr('tabindex', -1);
    }

});

});

以下是js小提琴链接：https://jsfiddle.net/kd7e2xpc/2/

推荐答案

这里的关键是首先了解如何通过单击外部的任何位置来关闭弹出窗口，此解决方案(解释为here)使用以下代码：

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

所以您整个完整的日历js初始化都很好，只需要注入相同的想法，但是要注意日历事件内部的单击：

$('html').on('click', function(e) {
  $('.popover').each( function() {
    if( $(e.target).parents(".fc-time-grid-event").get(0) !== $(this).prev().get(0) ) {
      $(this).popover('hide');
    }
  });
});

工作解决方案here。

这篇关于完整日历中的流行音乐不会被解雇的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！