Bootstrap Modals
Default Variation
Modals are completely customizable and here we present the default one the block based one
Size: Small
If you don’t have much content, you can use the small size variation
Size: Large
If you need more space you can use the large size variation
Size: Extra Large
If you need even more space you can use the extra large size variation
Position: Top
You can position your modals at the top of the screen
Position: Vertically Centered
You can center your modals in the middle of the screen
Bootstrap Modals Animations
Fade In
The default modal animation
Pop In
Poping in animation
Pop Out
Poping out animation
Slide Up
Sliding from up animation
Slide Right
Sliding from right animation
Slide Left
Sliding from left animation
From Right
Coming from right with rotation animation
From Left
Coming from left with rotation animation
Bootstrap Modals JavaScript
Methods
There are various methods you can use to handle the modals
Show Modal
jQuery('#modal-id').modal('show');
Hide Modal
jQuery('#modal-id').modal('hide');
Toggle Modal
jQuery('#modal-id').modal('toggle');
Events
There are various events you can use to handle custom JS code. For example, initialize a plugin when a modal is shown
When the modal is shown
jQuery('#modal-id').on('shown.bs.modal', function (e) { // do something... })
When the modal is hidden
jQuery('#modal-id').on('hidden.bs.modal', function (e) { // do something... })