How do you use qtip Modal on fullCalendar?

问题

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.

Here is the link for the tutorial: http://craigsworks.com/projects/qtip/demos/effects/modal#

回答1:

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

来源：https://stackoverflow.com/questions/25379229/how-do-you-use-qtip-modal-on-fullcalendar