Fostrap - The modal plugin is dialog box / popup that make a page focused on one section / box.
Today, I want to tutorial and share code snippets Bootstrap Modal Animation Effects Example with Material Design Style. Very much effect that FadeIn, Flip, Slide Down, Slide Up, etc.
First, setting Bootstrap, JQuery, and Velocity.js
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.min.js'></script>
You can copy Modal Dialog that you want, example :
I Want Modal Animation Effects Fade In
Then, copy The Javascript
$(".modal").each(function(l){$(this).on("show.bs.modal",function(l){var o=$(this).attr("data-easein");"shake"==o?$(".modal-dialog").velocity("callout."+o):"pulse"==o?$(".modal-dialog").velocity("callout."+o):"tada"==o?$(".modal-dialog").velocity("callout."+o):"flash"==o?$(".modal-dialog").velocity("callout."+o):"bounce"==o?$(".modal-dialog").velocity("callout."+o):"swing"==o?$(".modal-dialog").velocity("callout."+o):$(".modal-dialog").velocity("transition."+o)})});
If you want to change with Material Design Style, copy The CSS below :
.modal-content {
border: none;
border-radius: 2px;
box-shadow: 0 16px 28px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21);
}
.modal-header{
border-bottom: 0;
padding-top: 15px;
padding-right: 26px;
padding-left: 26px;
padding-bottom: 0px;
}
.modal-title {
font-size: 34px;
}
.modal-body{
border-bottom: 0;
padding-top: 5px;
padding-right: 26px;
padding-left: 26px;
padding-bottom: 10px;
font-size: 15px;
}
.modal-footer {
border-top:0;
padding-top: 0px;
padding-right:26px;
padding-bottom:26px;
padding-left:26px;
}
.btn-default,.btn-primary {
border: none;
border-radius: 2px;
display: inline-block;
color: #424242;
background-color: #FFF;
text-align: center;
height: 36px;
line-height: 36px;
outline: 0;
padding: 0 2rem;
vertical-align: middle;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
letter-spacing: .5px;
transition: .2s ease-out;
}
.btn-default:hover{
background-color: #FFF;
box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
}
.btn-primary {
color: #FFF;
background-color: #2980B9;
}
.btn-primary:hover{
background-color: #2980B9;
box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
}