你如何在fullCalendar上使用qtip Modal？ [英] How do you use qtip Modal on fullCalendar?

问题描述

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

How do I implement this code from qTip for my fullcalendar Events? This is a modal feature of the qTip plugin and I wish to display this modal whenever I click an event in the calendar.

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

推荐答案

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

Here's an example on how to create the qtip when an event gets clicked. For perfomance reasons, the modal is created onclick for the specified event, not onpageload for all events.

$(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);
   });
});

这篇关于你如何在fullCalendar上使用qtip Modal？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！