Stacked Bootstrap Modal Example
https://miles-by-motorcycle.com/static/bootstrap-modal/index.html
https://codepen.io/maouida/pen/NPGaaN
Multiple modals overlay
https://stackoverflow.com/questions/19305821/multiple-modals-overlay
Multiple Modal Based Carousels
https://bootsnipp.com/snippets/A8p0D
Bootstrap 3 Dialog
https://github.com/nakupanda/bootstrap3-dialog/
Code Samples
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified jQuery -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function(){
$('.btn[data-toggle=modal]').on('click', function(){
var $btn = $(this);
var currentDialog = $btn.closest('.modal-dialog'),
targetDialog = $($btn.attr('data-target'));;
if (!currentDialog.length)
return;
targetDialog.data('previous-dialog', currentDialog);
currentDialog.addClass('aside');
var stackedDialogCount = $('.modal.in .modal-dialog.aside').length;
if (stackedDialogCount <= 5){
currentDialog.addClass('aside-' + stackedDialogCount);
}
});
$('.modal').on('hide.bs.modal', function(){
var $dialog = $(this);
var previousDialog = $dialog.data('previous-dialog');
if (previousDialog){
previousDialog.removeClass('aside');
$dialog.data('previous-dialog', undefined);
}
});
});
</script>
<style>
@import "lesshat";
@distance:40px; /* distance between stacked modals*/
@modal-translate-z: -340px; /* The first modal translateZ value*/
.transform(@translateZ) {
-webkit-transform: scale(0.8) rotateY(45deg) translateZ(@translateZ);
-ms-transform: scale(0.8) rotateY(45deg) translateZ(@translateZ);
-o-transform: scale(0.8) rotateY(45deg) translateZ(@translateZ);
transform: scale(0.8) rotateY(45deg) translateZ(@translateZ);
}
.preserve-3d(){
-webkit-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.perspective(@perspective){
-webkit-perspective:@perspective;
-moz-perspective:@perspective;
-ms-perspective:@perspective;
-o-perspective:@perspective;
perspective:@perspective;
}
.container{
margin:5em auto;
}
.modal.in{
.perspective(2000px);
.modal-dialog{
&.aside{
.transform(@modal-translate-z);
.preserve-3d();
&.aside-1{
.transform(calc(@modal-translate-z + @distance));
}
&.aside-2{
.transform(calc(@modal-translate-z + (@distance * 2)));
}
&.aside-3{
.transform(calc(@modal-translate-z + (@distance * 3)));
}
&.aside-4{
.transform(calc(@modal-translate-z + (@distance * 4)));
}
&.aside-5{
.transform(calc(@modal-translate-z + (@distance * 5)));
}
}
}
}
</style>
</head>
<body>
<div class="container">
<h1>Stack Bootstrap modals nicely</h1>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#test-modal">Show Modal</button>
<div class="modal fade" id="test-modal" data-modal-index="1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title 1</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
<button class="btn btn-default" data-toggle="modal" data-target="#test-modal-2">Launch Modal 2</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="test-modal-2" data-modal-index="2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title 2</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
<button class="btn btn-default" data-toggle="modal" data-target="#test-modal-3">Launch Modal 3</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="test-modal-3">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title 3</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
<button class="btn btn-default" data-toggle="modal" data-target="#test-modal-4">Launch Modal 4</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="test-modal-4">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title 4</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</body>
</html>
