你如何在 fullCalendar 上使用 qtip Modal？

Question

如何从 qTip 为我的全日历事件实现此代码？这是 qTip 插件的一个模式功能，我希望每当我单击日历中的事件时显示此模式。

这是教程的链接： http://craigsworks.com/projects/qtip/demos/effects/modal#

Answer 1

这是一个关于如何在点击事件时创建 qtip 的示例。出于性能原因，模式是针对指定事件的 onclick 创建的，而不是针对所有事件的 onpageload。

$(document).ready(function() {
   // watch for click on the event elements
   $(document).on('click', '.fc-event', function(){

      // qtip already is created for this event -> leave this function -> the modal gets opened
      if($(this).data('qtip')) {
         return;
      }

      // no qtip for this event created -> create it
   $(this).qtip(
      {
         content: {
            title: {
               text: 'Modal qTip',
               button: 'Close'
            },
            text: 'Heres an example of a rather bizarre use for qTip... a tooltip as a <b>modal dialog</b>! <br /><br />' +
               'Much like the <a href="http://onehackoranother.com/projects/jquery/boxy/">Boxy</a> plugin, ' +
               'but if you\'re already using tooltips on your page... <i>why not utilise qTip<i> as a modal dailog instead?'
            },
            position: {
               target: $(document.body), // Position it via the document body...
               corner: 'center' // ...at the center of the viewport
            },
            show: {
               when: 'click', // Show it on click
               solo: true // And hide all other tooltips
            },
            hide: false,
            style: {
               width: { max: 350 },
               padding: '14px',
               border: {
                  width: 9,
                  radius: 9,
                  color: '#666666'
               },
               name: 'light'
            },
            api: {
               beforeShow: function()
               {
                  // Fade in the modal "blanket" using the defined show speed
                  $('#qtip-blanket').fadeIn(this.options.show.effect.length);
               },
               beforeHide: function()
               {
                  // Fade out the modal "blanket" using the defined hide speed
                  $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
               }
            }
         });

      // show it after creation
      $(this).qtip('toggle', true);
   });
});