模態引導不表明直到函數結束

我想隱藏一個模式，以顯示另一個模式（‘請稍候屏’），等待函數調用結束（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(); 
});

來源

2015-11-12 Rodolpho Gheleri

引導程序的模態類暴露了一些事件，以便掛鉤到模態功能中。

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

來源

2015-11-12 23:27:28 Sree

可能是你應該loadData（）裏面的功能 $（ '＃modal1'）。在（ 'hidden.bs.modal'，函數（E）{ $（「＃myPleaseWait」）。 modal（「show」）; loadData（）; }）; 用代碼創建一個js小提琴。chk會更容易。 – Sree

感謝@sri，你的解釋，我可以解決這個問題。

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

    e.preventDefault(); 

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

來源

2015-11-12 23:58:25

模態引導不表明直到函數結束

回答

相關問題