Question

冗长简短：我正在尝试在页面加载时使Bootstrap的模态窗口可见。

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

代码是关于如何创建一个模态窗口，但是当单击button元素时，我希望它在触发页面时触发并完全摆脱按钮。当然，一种方法是隐藏按钮并捎带其点击事件，例如：

<button id="the-button" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="display:none;">Open Modal</button>
<script type="text/javascript">
     $(function() { $('#the-button').click(); });
</script>

我宁愿只删除HTML中的按钮，并且在单击按钮时发生的页面加载也会发生同样的事情。

我在Google Chrome的检查器中查看了事件监听器，但我不知道如何使用它来提取点击功能。它包含有关功能的信息，但不包含功能本身。

Answer 1

这是一个可能的解决方案：https://jsfiddle.net/99x50s2s/60/

您不需要单独的按钮。只需调用模态（'show'）函数，如下所示，

var modalDialog = $('#myModal');
modalDialog.modal('show');

Answer 2

签出show attribute默认为真。

所以你可以：

<script>
$(function() {
    $('#myModal').modal();
});
</script>

Answer 3

在jQuery中还有一个事件load()。您不必窃取点击事件，只需在页面加载时触发您的功能：

$( window ).load(function() {
    $( "#myModal" ).modal();
});

或者您甚至可以使用：

$( document ).ready(function() {
    $( "#myModal" ).modal();
});

如何从元素中窃取click事件？

3 个答案: