jquery - 在全日历中单击随机日期时，Bootstrap 模式无法正确显示

Question

我写了一个自定义完整日历 as shown here .
它按预期工作。但是有一个问题。当我点击完整日历中的任何日期时，模式就会出现。但是 bootstrap 的模态 css 不适用于它。它以一种相当朴素的风格弹出。我希望 bootstrap 的模态 css 在弹出时应用于模态。
代码:

$(document).ready(function () {
    var date = moment().format("YYYY/MM/DD", "ddd, YYYY MM DD HH:mm:ss ZZ");
    console.log(date);
    $('#calendar').fullCalendar({
        theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: date,
        editable: true,
        eventLimit: true,
        selectable: true,
        select: function (date) {
            dateNew = moment(date).format('YYYY/MM/DD');
            $('#createEventModal #apptDate').val(dateNew);
            $('#createEventModal').modal('show');
        }
    });
    $('#submitButton').on('click', function (e) {
        // We don't want this to act as a link so cancel the link action
        e.preventDefault();
        doSubmit();
    });

    function doSubmit() {
        $("#createEventModal").modal('hide');
        console.log($('#apptDate').val());
        alert("form submitted");
        $("#calendar").fullCalendar('renderEvent', {
            title: $('#patientName').val(),
            Name: $('#patient').val(),
            dateNew: new Date($('#apptDate').val()),
        },
        true);
    }
});

Answer 1

你需要添加两个div

<div class="modal-dialog" role="document">
    <div class="modal-content">

    </div>
</div>

See jsfiddle