ブートストラップjqueryオープンモーダルでの背景スクロール

Question

私は2つのモーダルを持っています。最初のモーダルがトリガされてユーザのメールが取得されます。ユーザーが電子メールアドレスを確認してからクリックすると、2番目のモーダルがスクロール可能な長いモーダルになります。今、このモーダルはコードからプログラムでトリガされます。

$('#modalEmailSignup').modal('hide'); 

$('#modalSignupForm').modal('show'); 

これは私のコードです。正常に動作しています。しかし、問題は、第2モーダルのスクロール可能領域が背景であることです。モーダルを正しくトリガーしているかどうかはわかりません。このコードで新しいものを開く前に、すべてのモーダルを閉じてみました。

$('.modal .close).trigger('click'); 

しかし、これは動作していないようです。私は他のスクロール可能なモーダルを開くフローを調べてみました。そして、それはボディに「モーダルオープン」クラスを追加しているようです。私はモーダルを開いても、まだ動作していないときに追加しようとしました。私はこの問題を解決しようとするアイディアが不足しています。この問題に誰かが遭遇しましたか？あなたの洞察を教えてください。ありがとう:)

私はここで角を使用して、私は（data-target = 'targetModal'、data-dismiss = 'modal'）を追加すると動作しますが、ng-click属性を追加して処理を進める前にまず検証関数を呼び出します。

Answer 1

ここでは、私は2個のモーダルを持っている例ソリューションhttp://jsfiddle.net/h3WDq/2132/

$('button[btnClass="close"]').click(function(){ 
 
\t $('#myModal1').modal('hide'); 
 
\t $('#myModal2').modal({show: true}); 
 
});

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <h3>Modal Example</h3> 
 

 
    <!-- Button to trigger modal --> 
 
    <div> 
 
    <a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a> 
 
    </div> 
 

 
    <!-- Modal --> 
 
    <div id="myModal1" class="modal hide" tabindex="-1" role="dialog"> 
 
    <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
     <h3>Standard Selectpickers</h3> 
 
    </div> 
 
    <div class="modal-body"> 
 

 
     <select class="selectpicker" data-container="body"> 
 
     <option>Mustard</option> 
 
     <option>Ketchup</option> 
 
     <option>Relish</option> 
 
     </select> 
 

 
    </div> 
 
    <div class="modal-footer"> 
 
     <button class="btn" btnClass="close" aria-hidden="true">Close</button> 
 
     <button class="btn btn-primary save">Save changes</button> 
 
    </div> 
 
    </div> 
 

 
    <!-- Modal --> 
 
    <div id="myModal2" class="modal hide" tabindex="-1" role="dialog"> 
 
    <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
     <h3>Modal 2</h3> 
 
    </div> 
 
    <div class="modal-body"> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
 
    </div> 
 
    </div> 
 

 
</div> 
 

 
<style>

ソリューションで

、 で行きます。 最初のモーダルは、 開始ボタンをクリックして起動します。

あなたは最初モーダルでクリック近いボタン、二モーダル表示されます。