我的弹出窗口出现了两个奇怪的问题,显示在fiddle中
- 在我选择了一天(在完整日历中)并且弹出窗口显示后,我再次单击该天以隐藏弹出窗口,然后在同一天再次单击以再次显示,但没有弹出窗口!。在我单击以显示、隐藏,然后再次单击以显示我有问题之后
- 当我在一天内(4月20日)点击事件LimitClick事件时,然后点击当天(4月二十日)。在我点击当天之后,popover会隐藏起来,但不会像应该的那样显示当天的任何popover
以下是一些逻辑,但请参阅上面的fiddle链接以获取工作代码。
var $calPopOver;
$('#fullcalendar').fullCalendar({
header: {
left: 'prev,next', //today',
center: 'title',
right: ''
},
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
eventLimit: 1,
events: function(start, end, timezone, callback) {
$.ajax({
url: '/ManageSpaces/GetDiaryEvents/',
dataType: 'json',
data: {
start: start.format(),
end: end.format(),
id: $("#HiddenYogaSpaceId").val()
},
success: function(doc) {
var events = [];
$(doc).each(function() {
events.push({
title: "1 Event", //$(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
},
eventLimitText: function(numberOfEvents) {
return numberOfEvents + " Events";
},
eventLimitClick: function(cellInfo, jsEvent) {
$(cellInfo.dayEl).popover({
html: true,
placement: 'bottom',
container: 'body',
title: function() {
return $("#events-popover-head").html();
},
content: function() {
return $("#events-popover-content").html();
}
});
//$(cellInfo.dayEl).popover('toggle');
if ($calPopOver) {
$calPopOver.popover('destroy');
}
$calPopOver = $(cellInfo.dayEl).popover('show');
},
eventClick: function(calEvent, jsEvent, view) { //function (data, event, view) {
//var s = cellInfo.segs;
$("#eventDetails.collapse").collapse('toggle');
if ($calPopOver)
$calPopOver.popover('destroy');
},
dayClick: function(data, event, view) {
$dayClickedDate = data.format();
$(this).popover({
html: true,
placement: 'bottom',
container: 'body',
title: function() {
return $("#day-popover-head").html();
},
content: function() {
return $("#day-popover-content").html();
}
});
//$(this).popover('toggle');
if ($calPopOver) {
$calPopOver.popover('destroy');
}
$calPopOver = $(this).popover('show');
}
});
也许您可以看看这些引导程序示例。如果你能设法得到一份例子的副本,这只是一个简单的复制粘贴场景IMO.
http://getbootstrap.com/javascript/
在这个页面上搜索"Popovers-popover.js"并向下滚动一点以获取示例。