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>

Bootstrap模式仅使用按钮打开

2 个答案: