顯示此引導模態頁面加載

Question

我有以下引導模式...

HTML：

<div id="tallModal" class="modal modal-wide fade"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <p>One fine body&hellip;</p> 
     </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><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

CSS：

.modal.modal-wide .modal-dialog { 
    width: 90%; 
} 
.modal-wide .modal-body { 
    overflow-y: auto; 
} 

JS：

$(".modal-wide").on("show.bs.modal", function() { 
    var height = $(window).height() - 200; 
    $(this).find(".modal-body").css("max-height", height); 
}); 

這是在CodePen上：https://codepen.io/TomAshley/pen/wPxBjB

如何在頁面加載後立即顯示模式？我的這種嘗試是使用window.load，你可以在這裏看到：

$(window).load("show.bs.modal", function() { 
     var height = $(window).height() - 200; 
     $(this).find(".modal-body").css("max-height", height); 
    }); 

不過，這並不彈出模式。如何使它在頁面加載時彈出？

Answer 1

觸發模態編程

$(document).ready(function() { 
    $('#tallModal').modal('show'); 
}); 

這裏是pen

Answer 2

對於這種情況，我們可以使用

$(document).ready(function() { 
    var height = $(window).height() - 200; 
    $(this).find(".modal-body").css("max-height", height); 
}