我必须在点击事件时打开一个弹出窗口,如果你点击它之外的任何地方应该被解雇,所以我使用带有焦点触发器的弹出窗口,当我在事件外点击时它不会被解雇
以下是我正在使用的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/
答案 0 :(得分:1)
这里的关键是先了解如何通过点击外面的任何地方来解除弹出窗口,这个解决方案(解释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');
}
});
});
所以你整个fullcalendar 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。