使用Magnific Popup从完整日历中打开Goog​​le日历活动链接

Question

我使用Full Calendar来提取Google日历信息，并希望执行与this类似的操作，当点击日历中的链接时，该Magnific Popup会填充隐藏元素中的空元素，并且然后在Bootstrap模态窗口中显示它，除了{{3}}，我已经在这个特定网站上使用了模态。

在Bootstrap示例中，模态初始化为：

$('#modal').modal();

但是使用Magnific Popup，它会在您点击的链接上进行初始化。所以我不确定如何将这两种技术结合起来。

所以在我的HTML中，我有：

<div id="calendar"></div>
<div id="calendar-popup" class="white-popup mfp-hide">
    <h2 id="modalTitle" class="modal-title"></h2>
    <div id="modalBody" class="modal-body"></div>
    <a id="eventUrl" class="button" rel="external">Event page</a>
</div>

和我的js：

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,basicDay'
    },
    googleCalendarApiKey: 'XXXX',
    eventClick:  function(event, jsEvent, view) {
        $('#modalTitle').html(event.title);
        $('#eventUrl').attr('href',event.url);
        $('#calendar-popup').magnificPopup({type:'inline'});
    },
    eventSources: [
        …
    ]
});

目前，我使用magnificPopup初始化#calendar-popup，但这是目标，而不是点击的链接。

Answer 1

将Magnific Popup附加到eventRender：

eventRender: function(event, element) {
     //Initialize Magnific Popup Plugin for event info on eventClick
     element.magnificPopup({
          items: {
               // Set the source to the div containing event's data
               src: '#eventContent',
               type: 'inline'
          }
      });
}

此处有更多信息：http://fullcalendar.io/docs/event_rendering/eventRender/