模态 bootstrap 直到函数结束才显示

Question

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

我想隐藏一个模态以显示另一个模态("Please wait screen")，等待函数调用结束(loadData())。但是第一个模态被隐藏，然后屏幕逐渐消失，直到函数结束，然后才出现 "Please Wait" 模态。

欢迎任何帮助。

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 的模态 class 公开了一些用于连接到模态功能的事件。

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

shown.bs.modal
当模式对用户可见时会触发此事件（将等待 CSS 转换完成）。

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

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

Answer 2

谢谢@sri，有了你的解释我可以解决它。

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

   e.preventDefault();

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

模态 bootstrap 直到函数结束才显示

Modal bootstrap is not showed until function ends

javascript

jquery

modal-dialog

twitter-bootstrap