"Animate Modal BS4"
Bootstrap 4.0.0 Snippet by johan190693

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row text-center">
<div class="col-12">
<h1 class="text-muted">Animate Modal</h1>
</div>
<div class="col-md-4 col-xs-12">
<div class="bg-faded p-2 mt-5">
<h2 class="animated infinite fadeIn text-muted">Fade</h2>
<div class="lead py-2 px-5" style="background-color:white;max-height:254px;overflow-y:auto">
<button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-fadeUp" >Down</button>
<button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-fadeRight" >Left</button>
<button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-fadeDown" >Up</button>
<button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-fadeLeft" >Right</button>
<button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-fadeUpBig" >Down</button>
<button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-fadeRightBig" >Left</button>
<button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-fadeDownBig" >Up</button>
<button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-fadeLeftBig" >Right</button>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="bg-faded p-2 mt-5">
<h2 class="animated infinite zoomIn text-muted">Zoom</h2>
<div class="lead py-2 px-5" style="background-color:white;max-height:254px;overflow-y:auto">
<button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-zoom" >Center</button>
<button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-zoomUp" >Down</button>
<button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-zoomRight" >Left</button>
<button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-zoomDown" >Up</button>
<button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-zoomLeft" >Right</button>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css');
.bg-faded{background-color:#f3f3f3;max-height:500px}
.btn-round{border-radius:500px}
.btn-round,.btn-round:hover,.btn-round:active{border-color:transparent}
.modal.animate {opacity:0}
.modal.animate.show {opacity:1}
.modal.animate .modal-dialog{-webkit-transform:translate(0,0);-ms-transform: translate(0,0);transform:translate(0,0)}
.modal.animate .a-fadeLeftBig{-webkit-animation:fadeOutLeftBig .5s;animation:fadeOutLeftBig .5s}
.modal.animate.show .a-fadeLeftBig{-webkit-animation:fadeInLeftBig .5s;animation:fadeInLeftBig .5s}
.modal.animate .a-fadeRightBig{-webkit-animation:fadeOutRightBig .5s;animation:fadeOutRightBig .5s}
.modal.animate.show .a-fadeRightBig{-webkit-animation:fadeInRightBig .5s;animation:fadeInRightBig .5s}
.modal.animate .a-fadeUpBig{-webkit-animation:fadeOutUpBig .5s;animation:fadeOutUpBig .5s}
.modal.animate.show .a-fadeUpBig{-webkit-animation:fadeInUpBig .5s;animation:fadeInUpBig .5s}
.modal.animate .a-fadeDownBig{-webkit-animation:fadeOutDownBig .5s;animation:fadeOutDownBig .5s}
.modal.animate.show .a-fadeDownBig{-webkit-animation:fadeInDownBig .5s;animation:fadeInDownBig .5s}
.modal.animate .a-fadeRight{-webkit-animation:fadeOutRight .5s;animation:fadeOutRight .5s}
.modal.animate.show .a-fadeRight{-webkit-animation:fadeInRight .5s;animation:fadeInRight .5s}
.modal.animate .a-fadeLeft{-webkit-animation:fadeOutLeft .5s;animation:fadeOutLeft .5s}
.modal.animate.show .a-fadeLeft{-webkit-animation:fadeInLeft .5s;animation:fadeInLeft .5s}
.modal.animate .a-fadeUp{-webkit-animation:fadeOutUp .5s;animation:fadeOutUp .5s}
.modal.animate.show .a-fadeUp{-webkit-animation:fadeInUp .5s;animation:fadeInUp .5s}
.modal.animate .a-fadeDown{-webkit-animation:fadeOutDown .5s;animation:fadeOutDown .5s}
.modal.animate.show .a-fadeDown{-webkit-animation:fadeInDown .5s;animation:fadeInDown .5s}
.modal.animate .a-lightSpeed{-webkit-animation:lightSpeedOut .5s;animation:lightSpeedOut .5s}
.modal.animate.show .a-lightSpeed {-webkit-animation:lightSpeedIn .5s;animation: lightSpeedIn .5s}
.modal.animate .a-flipX{-webkit-animation:flipOutX .5s;animation:flipOutX .5s}
.modal.animate.show .a-flipX{-webkit-animation:flipInX .5s;animation:flipInX .5s}
.modal.animate .a-flipY{-webkit-animation:flipOutY .5s;animation:flipOutY .5s}
.modal.animate.show .a-flipY{-webkit-animation:flipInY .5s;animation:flipInY .5s}
.modal.animate .a-roll{-webkit-animation:rollOut .5s;animation: rollOut .5s}
.modal.animate.show .a-roll{-webkit-animation:rollIn .5s;animation:rollIn .5s}
.modal.animate .a-bounce{-webkit-animation:bounceOut .5s;animation:bounceOut .5s}
.modal.animate.show .a-bounce{-webkit-animation:bounceIn .5s;animation:bounceIn .5s}
.modal.animate .a-rotate{-webkit-animation:rotateOut .5s;animation:rotateOut .5s}
.modal.animate.show .a-rotate{-webkit-animation:rotateIn .5s;animation:rotateIn .5s}
.modal.animate .a-zoom{-webkit-animation:zoomOut .5s;animation:zoomOut .5s}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
$(function(){
$('[role=dialog]')
.on('show.bs.modal', function(e) {
$(this)
.find('[role=document]')
.removeClass()
.addClass('modal-dialog ' + $(e.relatedTarget).data('ui-class'))
})
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Light Bootstrap Dashboard PRO
arrow key navigation thumbnail gallery modal view
Fancy subscribe modal (md, lg) with delay functionality on page load
Squarespace like modal

Questions / Comments:

the jquery script must be loaded BEFORE bootstrap, otherwise we can enjoy the animation ...

Kranoon () - 6 years ago - Reply 0