Bootstrap Backdrop滾動jquery打開模態

Question

我有一個2模態，第一個模態被觸發來獲取用戶的電子郵件。在用戶驗證了電子郵件地址並點擊繼續之後，它將觸發第二個模式，該模式是可滾動的較長模式。現在，這個模式是從代碼中以編程方式觸發的。

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

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

這是我的代碼。它工作正常。但問題在於第二模態的可滾動區域是背景。我不確定我是否正確觸發模式。我試着關閉所有的模塊，然後用這段代碼打開一個新的模塊。

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

但這似乎不起作用。我試着尋找打開其他可滾動模式的流程，並且似乎它正在爲身體添加「模態打開」類。我嘗試添加它時，我打開模式，但仍然無法正常工作。我想盡辦法解決這個問題。有沒有人遇到過這個問題？請讓我知道你的見解。謝謝:)

順便說一句：我在這裏使用角度，它將工作，如果我添加（data-target ='＃targetModal'，data-dismiss ='modal'）但我添加了一個ng-click屬性來執行一個驗證功能，然後再繼續。

Answer 1

在這裏你用一個例子液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>

在上述方案中， 去我有兩個情態動詞。 第一種模式將在上點擊發射發射按鈕。

當你單擊關閉按鈕在第一模式，第二模式會顯示出來。