@manhnguyenv

Welcome to my blog!

Bootstrap Modal

March 13, 2018 21:23

Stacked Bootstrap Modal Example

https://miles-by-motorcycle.com/static/bootstrap-modal/index.html

http://jsfiddle.net/CxdUQ/

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">&times;</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&hellip;</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">&times;</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&hellip;</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">&times;</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&hellip;</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">&times;</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&hellip;</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>

Categories