Question

我有以下Bootstrap模式...

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() {
   var height = $(window).height() - 200;
   $(this).find(".modal-body").css("max-height", height);
}

在页面加载上显示此引导模式

1 个答案: