javascript - 直到函数结束才显示模态 Bootstrap

Question

我还是网络编程新手，但我正在努力学习:)

我想隐藏一个模式以显示另一个模式(“请等待屏幕”)，以等待函数调用结束(loadData())。但是第一个模态框被隐藏，然后屏幕逐渐淡出，直到功能结束，然后才会出现“请稍候”模态框。

欢迎任何帮助。

Ps:抱歉我的英语不好......

HTML

第一个模态

<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
        <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>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">Modal 1</h4>
            </div>

            <div class="modal-body">
                <button type="button" id= "btn1"  class="btn btn-primary"  data-target="#modal1">Click</button>
            </div>
        </div>
    </div>
</div>

第二个模态

<div class="modal fade bs-example-modal-sm" id="myPleaseWait" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <span class="glyphicon glyphicon-time">
                    </span> Processing data...
                 </h4>
            </div>
            <div class="modal-body">
                <div class="progress">
                    <div class="progress-bar progress-bar-info
                    progress-bar-striped active"
                    style="width: 100%">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript

$('#btn1').click(function(e) {
    e.preventDefault();

    $('#modal1').modal('hide');
    $("#myPleaseWait").modal("show");
    loadData();
});

Answer 1

Bootstrap 的模态类公开了一些用于 Hook 模态功能的事件。

show.bs.modal
当调用 show 实例方法时，此事件立即触发。

show.bs.modal
当模式对用户可见时会触发此事件(将等待 CSS 转换完成)​​。

隐藏.bs.modal
当调用 hide 实例方法时，会立即触发此事件。

hidden.bs.modal 当模态完成对用户隐藏时，会触发此事件(将等待 CSS 转换完成)​​。

loaded.bs.modal 当模式使用远程选项加载内容时会触发此事件。

$('#btn1').click(function(e) {
   e.preventDefault();

   $('#modal1').modal('hide');
   $('#modal1').on('hidden.bs.modal', function (e) {
      $("#myPleaseWait").modal("show");
   });
   loadData();
});

更多详情请参阅Bootstrap Documentation