显示此引导模态页面加载

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); 
}