2016-12-21 3 views
0

を開いている間に、他のクラスのロードを防止:は、私は次のようにブートストラップモーダルポップアップを開くトリガーれているボタンを持って、ブートストラップモーダルポップアップ

<a class="btn btn-app btnWatchlist" data-toggle="modal" data-target="#myModal" style="min-width:175px;margin:0;height:67px"> 
            <i class="fa fa-save"></i> Add to Watchlist 
           </a> 

モーダルポップアップHTMLは次のようなものです:

<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Modal Header</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Some text in the modal.</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 

ウォッチリストに追加ボタンは、サーバーへのjQueryポストの後にDOMにロードされ、サーバーがHTMLを返すときに、ユーザーDOMを更新してこのボタンを表示するだけです。

ここでの問題は、jqueryポストを実行すると、検索が実行されている間に基本的にシフトギアを表示するクラスを追加し、今度はボタンを押すとモーダルが表示されますが、モーダルポップアップをクリックしても同様です。

表示されるようにロードするクラスを作成するためのコードは次のとおりです。

ボタンを「ウォッチ・リストに追加」を押している間、私はこの二つの混合を防ぐことができますので、私は唯一のモーダルを表示して削除することができますどのように今
$body = $("body"); 
    function StartLoading() { 
     $(document).on({ 
      ajaxStart: function() { $body.addClass("loading"); } 
     }); 
    } 
    function StopLoading() { 
     $(document).on({ 
      ajaxStop: function() { $body.removeClass("loading"); } 
     }); 
    } 

DOMのロード後の読み込みクラス?

P.S.最終的には、モーダルポップアップそのものを表示するためにボタンをクリックしたときに、「読み込み」クラスの内容を表示したくないのです。

答えて

0

私はあなたの質問を正しく理解していますか、あなたのモーダルの内容が既にロードされているかどうかを追跡し、if(modalHasNotBeenLoaded)の中に文$body.addClass("loading");をラップする変数?

関連する問題