Question

中显示的弹出窗口有两个奇怪的问题

在我选择了一天（在fullcalendar中）和popover节目后，我再次点击该日来隐藏弹出窗口，然后我在同一天再次点击再次显示，但没有弹出窗口！在我点击显示，隐藏，然后点击再次显示我遇到问题之后。
当我在一天（4月20日小提琴）内点击eventLimitClick事件时，点击当天（4月20日）。单击该日后，弹出窗口会隐藏，但之后不会显示当天的任何弹出窗口。

以下是一些逻辑，但请参阅上面的小提琴链接以获取工作代码。

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');
  }
});

Answer 1

也许您可以查看这些引导示例。如果您可以设法获得示例的副本，那么复制和粘贴方案IMO就很简单。

http://getbootstrap.com/javascript/

在此页面上搜索“Popovers popover.js”并向下滚动一下示例。

显示Bootstrap popover异常行为的逻辑

1 个答案: