引导：在模式

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深，这是比我需要的模式。