Question

我是网络编程方面的新手，但是我＆＃39;我试图学习：）

我想隐藏一个模态以显示另一个模态（＆＃34;请等待屏幕＆＃34;），等待函数调用结束（loadData（））。但是第一个模态被隐藏起来，然后屏幕逐渐消失，直到功能结束，然后才会出现'＃34; Please Wait＆＃34;模态出现。

欢迎任何帮助。

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

<强> show.bs.modal
调用show instance方法时会立即触发此事件。

<强> shown.bs.modal
当模态对用户可见时将触发此事件（将等待CSS过渡完成）。

<强> hide.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

Answer 2

谢谢@sri，根据您的解释，我可以解决它。

listAdapter.swapCursor(newCursor);
listAdapter.notifyDataSetChanged();

在函数结束前不会显示模态引导程序

2 个答案: