Change the Bootstrap Modal effect
If you take a look at the bootstraps fade class used with the modal window you will find, that all it does, is to set the opacity value to 0 and adds a transition for the opacity rule.
Whenever you launch a modal the in class is added and will change the opacity to a value of 1.
Knowing that you can easily build your own fade-scale class.
Here is an example.
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
.fade-scale {
transform: scale(0);
opacity: 0;
-webkit-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear;
}
.fade-scale.in {
opacity: 1;
transform: scale(1);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade-scale" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
</div>
</div>-- UPDATE --
This answer is getting more up votes lately so i figured i add an update to show how easy it is to customize the BS modal in and out animations with the help of the great Animate.css library by
Daniel Eden.
All that needs to be done is to include the stylesheet to your <head></head> section. Now you simply need to add the animated class, plus one of the entrance classes of the library to the modal element.
<div class="modal animated fadeIn" id="myModal" tabindex="-1" role="dialog" ...>
...
</div>
But there is also a way to add an out animation to the modal window and since the library has a bunch of cool animations that will make an element disappear, why not use them. :)
To use them you will need to toggle the classes on the modal element, so it is actually better to call the modal window via JavaScript, which is described here.
You will also need to listen for some of the modal events to know when it's time to add or remove the classes from the modal element. The events being fired are described here.
To trigger a custom out animation you can't use the data-dismiss="modal" attribute on a button inside the modal window that's suppose to close the modal. You can simply add your own attribute like data-custom-dismiss="modal" and use that to call the $('selector').modal.('hide') method on it.
Here is an example that shows all the different possibilities.
/* -------------------------------------------------------
| This first part can be ignored, it is just getting
| all the different entrance and exit classes of the
| animate-config.json file from the github repo.
--------------------------------------------------------- */
var animCssConfURL = 'https://api.github.com/repos/daneden/animate.css/contents/animate-config.json';
var selectIn = $('#animation-in-types');
var selectOut = $('#animation-out-types');
var getAnimCSSConfig = function ( url ) { return $.ajax( { url: url, type: 'get', dataType: 'json' } ) };
var decode = function ( data ) {
var bin = Uint8Array.from( atob( data['content'] ), function( char ) { return char.charCodeAt( 0 ) } );
var bin2Str = String.fromCharCode.apply( null, bin );
return JSON.parse( bin2Str )
}
var buildSelect = function ( which, name, animGrp ) {
var grp = $('<optgroup></optgroup>');
grp.attr('label', name);
$.each(animGrp, function ( idx, animType ) {
var opt = $('<option></option>')
opt.attr('value', idx)
opt.text(idx)
grp.append(opt);
})
which.append(grp)
}
getAnimCSSConfig( animCssConfURL )
.done (function ( data ) {
var animCssConf = decode ( data );
$.each(animCssConf, function(name, animGrp) {
if ( /_entrances/.test(name) ) {
buildSelect(selectIn, name, animGrp);
}
if ( /_exits/.test(name) ) {
buildSelect(selectOut, name, animGrp);
}
})
})
/* -------------------------------------------------------
| Here is were the fun begins.
--------------------------------------------------------- */
var modalBtn = $('button');
var modal = $('#myModal');
var animInClass = "";
var animOutClass = "";
modalBtn.on('click', function() {
animInClass = selectIn.find('option:selected').val();
animOutClass = selectOut.find('option:selected').val();
if ( animInClass == '' || animOutClass == '' ) {
alert("Please select an in and out animation type.");
} else {
modal.addClass(animInClass);
modal.modal({backdrop: false});
}
})
modal.on('show.bs.modal', function () {
var closeModalBtns = modal.find('button[data-custom-dismiss="modal"]');
closeModalBtns.one('click', function() {
modal.on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function( evt ) {
modal.modal('hide')
});
modal.removeClass(animInClass).addClass(animOutClass);
})
})
modal.on('hidden.bs.modal', function ( evt ) {
var closeModalBtns = modal.find('button[data-custom-dismiss="modal"]');
modal.removeClass(animOutClass)
modal.off('webkitAnimationEnd oanimationend msAnimationEnd animationend')
closeModalBtns.off('click')
})@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css');
select, button:not([data-custom-dismiss="modal"]) {
margin: 10px 0;
width: 220px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4">
<select id="animation-in-types">
<option value="" selected>Choose animation-in type</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4">
<select id="animation-out-types">
<option value="" selected>Choose animation-out type</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4">
<button class="btn btn-default">Open Modal</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal animated" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-custom-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-custom-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Pure Bootstrap 4 solution with CSS 3.
<div class="modal fade2" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
.fade2 {
transform: scale(0.9);
opacity: 0;
transition: all .2s linear;
display: block !important;
}
.fade2.show {
opacity: 1;
transform: scale(1);
}
$('#exampleModal').modal();
function afterModalTransition(e) {
e.setAttribute("style", "display: none !important;");
}
$('#exampleModal').on('hide.bs.modal', function (e) {
setTimeout( () => afterModalTransition(this), 200);
})
Full example
Ref
- Thank you @DavidDomain.