仅使用按钮打开引导模式 [重复]

Question

我有 HTML 模板，其中注入了 bootsrap 模态，但模态仅通过按钮打开。我希望该模式在页面加载时自动打开，没有按钮。

所以这是按钮代码：

<button type="button" class="btn btn-success" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

这是模态代码 HTML：

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-sm">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                        <h4 class="modal-title" id="mySmallModalLabel">Modal title</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br><br>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                        <button type="button" class="btn btn-success">Save changes</button>
                                                    </div>
                                                </div></div></div>

Answer 1

您可以在 document.ready 上加载模式
文档加载后，您可以触发按钮上的点击事件

   <button type="button" id="smallModalButton" class="btn btn-success" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

 $( document ).ready(function() {
         $('#smallModalButton').click();
});

或者您可以简单地将模态切换为

     $( document ).ready(function() {
             $('.bs-example-modal-sm').modal('toggle');
    });

Answer 2

我找到了解决方案。将类从淡入淡出更改为显示，并添加 onclick 以关闭按钮。代码：

<div class="modal show bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

按钮：

 <button type="button" onclick = "$('.modal').removeClass('show').addClass('fade');"  class="btn btn-default" data-dismiss="modal">Close</button>