[英]fade in fullcalendar with a bootstrap modal
我正在嘗試在其中具有fullcalendar的引導程序模式中淡入淡出,而沒有彈出fullcalendar。在開始模式淡入時如何渲染日歷?
HTML
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div id='calendar'></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
JS
$(document).ready(function () {
$('#calendar').fullCalendar({
})
$('#myModal').on('shown.bs.modal', function (e) {
$('#calendar').fullCalendar('render');
});
});
從模態中刪除fade
類,並將JS更改為以下內容:
$(document).ready(function () {
$('#calendar').fullCalendar({
})
var shown = false;
$('#myModal').on('shown.bs.modal', function (e) {
if(shown === false) {
shown = true;
$('#calendar').fullCalendar('render');
$('#myModal').modal('hide');
$('#myModal').addClass('fade');
$('#myModal').modal('show');
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.