Fullcalendar：如何在单击自定义按钮时创建Bootstrap模式框？

Question

在FullCalendar中，我想在点击自定义按钮时创建一个引导模态。我不知道该怎么做。 我试过并保留了一个提示框，但这不是我的要求。帮我看一下点击按钮点击弹出模态。 以下是我的代码： -

<script>
 $(document).ready(function() {

 $.ajax({
        url: "calendar/show_holidays",
        type: 'POST', // Send post data
        data: 'type=fetch',
        async: true,
                success: function(s){

         holidays =s;
         // holidays = '['+s+']';
          //alert(holidays);
          $('#calendar').fullCalendar('addEventSource', JSON.parse(holidays));

          }
});


$('#calendar').fullCalendar({ 
  customButtons: {
    EventButton: {
        text:'Add Event',
         click:function(event, jsEvent, view){
                console.log(event.id);
                  var title = prompt('Event Title:', event.title, {     buttons: { Ok: true, Cancel: false} });
                  if (title){
                      event.title = title;
                          console.log('type=changetitle&title='+title+'&eventid='+event.id);
                      $.ajax({
                            url: '/calendar/show_holidays',
                        data:     'type=changetitle&title='+title+'&eventid='+event.id,
                            type: 'POST',
                            dataType: 'json',
                            success: function(response){    
                                if(response.status == 'success')                            
                                    $('#calendar').fullCalendar('updateEvent',event);
                            },
                            error: function(e){
                                alert('Error processing your request:    '+e.responseText);
                            }
                        });
                  }

        } 
    }
  },


 utc: true, 
header: { 
left: 'prev,next today EventButton', 
center: 'title', 
right: 'month,agendaWeek,agendaDay' 
   }, 
    editable: true, 
    droppable: true, 
    eventClick: function(calEvent, jsEvent, view) {
        alert('Event: ' + calEvent.title);
        // change the border color just for fun
       $(this).css('border-color', 'red');
    },

    eventAfterRender: function(event, element, view) { 
     element.append(event.title); 
    } 

    });


//$('#calendar').fullCalendar('addEventSource', jsonEvents);




    });
</script>

在我的html代码中，我添加了这个： -

 <div id='calendar'></div>