2016-07-30 10 views
-2

私はブートストラップモーダルダイアログを使用しています。モーダルがアニメーションなしですばやく表示されるように変更する必要があります。しかし、それが閉じると、ゆっくりと消えるはずです。アニメーションが見えるようにします。アニメーションが表示されていてもフェードアウトが遅くなるようにブートストラップモーダルダイアログを変更するにはどうすればいいですか?

以下は、私のポップアップのHTMLコードです。

<div class="modal" id="pleaseWaitPopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-body text-center"> 
       <p><i class="fa fa-spinner fa-5x fa-spin fa-pulse" aria-hidden="true"></i></p> 
       <p class="light-gray-pop"> Processing Your Request.</p> 
       <h3> PLEASE WAIT</h3> 
      </div> 
     </div> 
    </div> 
</div> 

以下がモーダルダイアログを表示するためのjsです。

$('#pleaseWaitPopup').modal({ 
      backdrop: 'static', 
      keyboard: false 
}); 
+0

これまでのところあなたの試行を共有できますか? –

答えて

2

ブートストラップモーダルにはclass="fade"を追加/削除できます。モーダルが示される直前フェードアニメーションを外し、モーダルが表示されたら、戻ってそれを追加します。

// Remove the fade animation for the modal before the modal is shown 
$('#pleaseWaitPopup').on('show.bs.modal', function() { 
    $(this).removeClass('fade'); 
}) 

// Add the fade animation for the modal once the modal is shown 
$('#pleaseWaitPopup').on('shown.bs.modal', function() { 
    $(this).addClass('fade'); 
}) 

$('#pleaseWaitPopup').modal({ 
      backdrop: 'static', 
      keyboard: false 
}); 

ここbootply
http://www.bootply.com/USl2vMXKCj

である私のことができるようにするために、一時クローズとオープンボタンを追加しましたモーダルを切り替えるが、必要に応じて自由に削除することができます/

関連する問題