Bootstrap 在全日历中点击随机日期时模态无法正确显示

Question

我写了一个自定义full calendaras 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

Bootstrap 在全日历中点击随机日期时模态无法正确显示

Bootstrap modal not appearing properly when clicked on a random date in fullcalendar

html

css

jquery

fullcalendar

twitter-bootstrap