在页面加载时显示此引导模式 [重复]

Posted 2023-02-22

【中文标题】在页面加载时显示此引导模式 [重复]

【英文标题】：Display This Bootstrap Modal on Page Load [duplicate]

【发布时间】：2018-05-09 05:45:37

【问题描述】：

我有以下引导模式...

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

但它不会弹出模态框。如何让它在页面加载时弹出？

【问题讨论】：

我认为我不应该在我的示例中使用 id。这就是我问的原因。

它也适用于一个类，只是可能会重复

【参考方案1】：

对于这个场景我们可以使用

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

【讨论】：

这不能回答问题...

【参考方案2】：

以编程方式触发模式

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

这里是pen

【讨论】：

也可以是$('.modal-wide').modal('show');，对吧？谢谢

是的，您只更改了选择器，但它匹配相同的元素，id(#) 更安全

由于我的设计中的某种原因，当我添加它时，模态宽度要小得多。知道如何防止这种情况发生吗？