引導：在模式

Question

打開另一個模式

所以，我用這個代碼來打開在當前另一個模式窗口打開模態窗口：

<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a> 

什麼情況是，對於像500毫秒滾動條將重複。我猜是因爲目前的模態還在淡出。但它看起來非常不順暢和口吃。

我將不勝感激任何建議來解決這個問題。

而且，就是這樣，這個建設中的一個onclick事件不專業？

我與3.0版的引導工作。

編輯：我想這是neccesary降低淡出模態的時間。這怎麼可能？

Answer 1

data-dismiss，使關閉當前模態窗口力

data-toggle開闢了一個新的模式裏面的href內容它

<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a> 

或

<a data-dismiss="modal" onclick="call the new div here">Click</a> 

做讓我們知道，如果它作品。

• 你可能也想看看周圍的Modal Documentation

Answer 2

看看要在當前打開的模態窗口中打開另一個模態窗口，
可以使用bootstrap-modal

bootstrap-modal DEMO

Answer 3

我的代碼和使用數據辭退工作這麼好

<li class="step1"> 
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox1"> 
     <p class="text-label">Step 1</p> 
     <p class="text-text">Plan your Regime</p> 
    </a> 

</li> 
<li class="step2"> 
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox2"> 
     <p class="text-label">Step 2</p> 
     <p class="text-text">Plan your menu</p> 
    </a> 
</li> 
<li class="step3 active"> 
    <a href="#" class="button-popup" data-toggle="modal" data-dismiss="modal" data-target="#lightbox3"> 
     <p class="text-label">Step 3</p> 
     <p class="text-text">This Step is Undone.</p> 
    </a> 
</li> 

Answer 4

Twitter的文檔說，自定義代碼需要...

這工作，沒有額外的JavaScript， 不過，自定義CSS會極力推薦...

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<!-- Button trigger modal --> 
 
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalOneModal"> 
 
     Launch demo modal 
 
    </button> 
 
      <!-- Modal --> 
 
      <div class="modal fade bg-info" id="modalOneModal" tabindex="-1" role="dialog" aria-labelledby="modalOneLabel" aria-hidden="true"> 
 
    
 
       <div class="modal-dialog"> 
 
      
 
       <div class="modal-content bg-info"> 
 
        <div class="modal-header btn-info"> 
 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
        <h4 class="modal-title" id="modalOneLabel">modalOne</h4> 
 
        </div> 
 
        <div id="thismodalOne" class="modal-body bg-info"> 
 
       
 
       
 
       <!-- Button trigger modal --> 
 
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#twoModalsExample"> 
 
     Launch demo modal 
 
    </button> 
 
       
 
        <div class="modal fade bg-info" id="twoModalsExample" style="overflow:auto" tabindex="-1" role="dialog" aria-hidden="true"> 
 
       <h3>EXAMPLE</h3> 
 
      </div> 
 
        </div> 
 
        <div class="modal-footer btn-info" id="woModalFoot"> 
 
        <button type="button" class="btn btn-info" data-dismiss="modal">Close</button> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
    <!-- End Form Modals -->

Answer 5

實際上，你可以發現，當個Ë老態關閉致電hidden.bs.modal事件：

$('.yourButton').click(function(e){ 
     e.preventDefault(); 

     $('#yourFirstModal') 
      .modal('hide') 
      .on('hidden.bs.modal', function (e) { 
       $('#yourSecondModal').modal('show'); 

       $(this).off('hidden.bs.modal'); // Remove the 'on' event binding 
      }); 

    }); 

欲瞭解更多信息：http://getbootstrap.com/javascript/#modals-events

Answer 6

上，有很多模態調用其它情態動詞和一些HTML傢伙可能不知道發起的一個項目工作它每次都爲每個按鈕。 作爲@gmaggio得出了類似的結論，在經歷了漫長的第一次之後，勉強自己。

編輯：現在支持通過javascript調用模態。

編輯：從另一個模態打開滾動模態現在工作。

$(document).on('show.bs.modal', function (event) { 
    if (!event.relatedTarget) { 
     $('.modal').not(event.target).modal('hide'); 
    }; 
    if ($(event.relatedTarget).parents('.modal').length > 0) { 
     $(event.relatedTarget).parents('.modal').modal('hide'); 
    }; 
}); 

$(document).on('shown.bs.modal', function (event) { 
    if ($('body').hasClass('modal-open') == false) { 
     $('body').addClass('modal-open'); 
    }; 
}); 

剛剛發生的模態呼叫按鈕爲正常，如果拿起是一個模式裏面，它會首先關閉打開的數據目標指定的之前，在當前之一。 請注意relatedTarget由Bootstrap提供。

我還增加了以下理順衰落了一下： 我相信更多的雖然可以完成。

.modal-backdrop.fade + .modal-backdrop.fade { 
    transition: opacity 0.40s linear 0s; 
} 

Answer 7

我的解決方案不關閉較低的模式，但真正的堆疊在它上面。它可以正確保持滾動行爲。在引導程序中測試3.要使模塊按預期方式堆疊，您需要按照從最低到最高的Html標記對其進行排序。

$(document).on('hidden.bs.modal', function (event) { 
 
    if ($('.modal:visible').length) { 
 
    $('body').addClass('modal-open'); 
 
    } 
 
});

UPDATE：當你已經堆放情態動詞，所有的背景出現在最下面的模式之下。您可以通過添加以下CSS來修復該問題：

.modal-backdrop { 
    visibility: hidden !important; 
} 
.modal.in { 
    background-color: rgba(0,0,0,0.5); 
} 

這將顯示最頂端可見模式下的模態背景。通過這種方式，它可以在底下對較低的模態進行灰化處理。

Answer 8

試試這個

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button> 
 

 

 

 
<div id="test1" class="modal fade" role="dialog" style="z-index: 1400;"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     
 
     <div class="modal-body"> 
 
     \t <button type="button" class="btn btn-info btn-lg" data-toggle="modal"  data-target="#test2">Open Modal 2</button> 
 
     \t 
 
     </div>  
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="test2" class="modal fade" role="dialog" style="z-index: 1600;"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     
 
     <div class="modal-body"> 
 
     \t 
 
     content 
 
     \t 
 
     </div>  
 
    </div> 
 
    </div> 
 
</div> 
 
    
 

 
</body> 
 
</html>

Answer 9

我也遇到了一些麻煩我的滾動模態，所以我做了這樣的事情：

$('.modal').on('shown.bs.modal', function() { 
    $('body').addClass('modal-open'); 
    // BS adds some padding-right to acomodate the scrollbar at right 
    $('body').removeAttr('style'); 
    }) 

    $(".modal [data-toggle='modal']").click(function(){ 
    $(this).closest(".modal").modal('hide'); 
    }); 

它將成爲任何模式在一個模態即將出現。 請注意，第一個關閉，第二個可以出現。 Bootstrap結構沒有變化。

Answer 10

試試這個：

// Hide the login modal 
$('#login').modal('hide'); 

// Show the next modal after the fade effect is finished 
setTimeout(function(){ $('#lost').modal('show'); }, 500); 

這種簡單的黑客對我的作品。

Answer 11

關閉第一個Bootstrap模態並動態打開新的模態。

$('#Modal_One').modal('hide'); 
setTimeout(function() { 
    $('#Modal_New').modal({ 
    backdrop: 'dynamic', 
    keyboard: true 
    }); 
}, 500); 

Answer 12

我走了一條不同的路線，我決定去「取消」它們。也許有人會發現這個方便...

var $m1 = $('#Modal1'); 
var $innermodal = $m1.find(".modal");  //get reference to nested modal 
$m1.after($innermodal);     // snatch it out of inner modal and put it after. 

Answer 13

情態動詞在模態：

$('.modal-child').on('show.bs.modal', function() { 
 
    var modalParent = $(this).attr('data-modal-parent'); 
 
    $(modalParent).css('opacity', 0); 
 
}); 
 
    
 
$('.modal-child').on('hidden.bs.modal', function() { 
 
    var modalParent = $(this).attr('data-modal-parent'); 
 
    $(modalParent).css('opacity', 1); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Modals in Modal</a> 
 

 

 
<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <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"> 
 
       <a href="#myModal1" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 1</a> 
 
       <a href="#myModal2" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 2</a> 
 
      </div> 
 

 
     </div> 
 
    </div> 
 
</div> 
 

 
<div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal"> 
 
    <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 1</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <p>Two modal body…1</p> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button> 
 
      </div> 
 

 
     </div> 
 
    </div> 
 
</div> 
 

 
<div id="myModal2" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal"> 
 
    <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 2</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <p>Modal body…2</p> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button> 
 
      </div> 
 

 
     </div> 
 
    </div> 
 
</div>

Answer 14

有人誰使用引導4 https://jsfiddle.net/helloroy/tmm9juoh/

var modal_lv = 0; 
 
$('.modal').on('shown.bs.modal', function (e) { 
 
    $('.modal-backdrop:last').css('zIndex',1051+modal_lv); 
 
    $(e.currentTarget).css('zIndex',1052+modal_lv); 
 
    modal_lv++ 
 
}); 
 

 
$('.modal').on('hidden.bs.modal', function (e) { 
 
    modal_lv-- 
 
});

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-a"> 
 
    Launch demo modal a 
 
</button> 
 

 
<div class="modal fade" id="modal-a" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-b"> 
 
    Launch another demo modal b 
 
</button> 
 
<p class="my-3"> 
 
Not good for fade In. 
 
</p> 
 
<p class="my-3"> 
 
who help to improve? 
 
</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="modal fade" id="modal-b" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-c"> 
 
    Launch another demo modal c 
 
</button> 
 
<p class="my-3"> 
 
But good enough for static modal 
 
</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<div class="modal" id="modal-c" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </div> 
 
     <div class="modal-body"> 
 
<p class="my-3">That's all.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 15

$(document).on('hidden.bs.modal', function (event) { 
 
    if ($('.modal:visible').length) { 
 
    $('body').addClass('modal-open'); 
 
    } 
 
});

Answer 16

對於引導4，對@ helloroy的回答擴大我用下面的; -

var modal_lv = 0 ; 
$('body').on('shown.bs.modal', function(e) { 
    if (modal_lv > 0) 
    { 
     $('.modal-backdrop:last').css('zIndex',1050+modal_lv) ; 
     $(e.target).css('zIndex',1051+modal_lv) ; 
    } 
    modal_lv++ ; 
}).on('hidden.bs.modal', function() { 
    if (modal_lv > 0) 
     modal_lv-- ; 
}); 

上述的優點是它不會有任何影響當只有一個模態時，它只能進行倍數運算。其次，它將處理委託給機構，以確保未來的模式仍然得到滿足。

更新

移動到JS/CSS的綜合解決方案提高了外觀 - 漸變動畫繼續在背景工作; -

var modal_lv = 0 ; 
$('body').on('show.bs.modal', function(e) { 
    if (modal_lv > 0) 
     $(e.target).css('zIndex',1051+modal_lv) ; 
    modal_lv++ ; 
}).on('hidden.bs.modal', function() { 
    if (modal_lv > 0) 
     modal_lv-- ; 
}); 

與下面的CSS相結合; -

.modal-backdrop ~ .modal-backdrop 
{ 
    z-index : 1051 ; 
} 
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop 
{ 
    z-index : 1052 ; 
} 
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop 
{ 
    z-index : 1053 ; 
} 

這將處理嵌套深達4深，這是比我需要的模式。