JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<button name="openModalOne">Open 1</button>
<div id="modalone" class="modal" role="dialog" >
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3>Modal 1</h3>
</div>
<div class="modal-body" style="height: 2000px">
<button name="stackone">Stack me</button>
</div>
<div class="modal-footer">
<button name="closeone">Button 1</button>
</div>
</div>
</div>
</div>
<div id="modaltwo" class="modal" role="dialog" >
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3>Modal 1</h3>
</div>
<div class="modal-body">
This is a stacked modal
</div>
<div class="modal-footer">
<button name="closetwo">Close</button>
</div>
</div>
</div>
</div>
JavaScript
$(document).ready(function(){
$('.modal').on('hidden.bs.modal', function( event ) {
$(this).removeClass('fv-modal-stack');
$('body').data( 'fv_open_modals', $('body').data('fv_open_modals')-1);
});
$('.modal').on('shown.bs.modal', function(){
if ( typeof ( $("body").data( 'fv_open_modals' ) ) == 'undefined')
{
$('body').data( 'fv_open_modals', 0 );
}
if($(this).hasClass('fv-modal-stack'))
{
return;
}
$(this).addClass('fv-modal-stack');
$('body').data('fv_open_modals', $('body').data('fv_open_modals')+1);
$(this).css('z-index', 1040 +(10*$('body').data('fv_open_modals')));
$('.modal-backdrop').not('.fv-modal-stack')
.css('z-index', 1039 + (10*$('body').data('fv_open_modals')));
$('.modal-backdrop').not('fv-modal-stack')
.addClass('fv-modal-stack');
});
$("button[name='openModalOne']").on('click', function(){
$("#modalone").modal('show');
});
$("button[name='stackone']").on('click', function(){
$("#modaltwo").modal('show');
});
$("button[name='closetwo']").on('click', function(){
$("#modaltwo").modal('hide');
});
$("button[name='closeone']").on('click', function(){
$("#modalone").modal('hide');
});
});