Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to customize modals with JavaScript with Bootstrap 5.
We can change the animation with the $modal-fade-transform
variable.
We just set it to the value we want.
To remove the animation, we remove the fade
class from the modal markup:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
Launch modal
</button>
<div class="modal" tabindex="-1" id='modal' data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
×
</button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
We can change the height dynamically with JavaScript by calling the myModal.handleUpdate()
to change it.
We can change the size of the modal by applying a few classes.
.modal-sm
makes it small.
.modal-lg
makes it large.
.modal-xl
makes it extra large.
So we can write:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
Launch modal
</button>
<div class="modal modal-sm" tabindex="-1" id='modal' data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
×
</button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
to change the size of the modal by adding the modal-sm
class in addition to the modal
class.
We can make the modal full screen with a few classes.
.modal-fullscreen
makes it always fullscreen.
.modal-fullscreen-sm-down
makes it full screen if the screen is below 576px wide
.modal-fullscreen-md-down
makes it full screen if the screen is below 768px wide.
.modal-fullscreem-lg-down
makes it full screen if the screen is below 992px wide.
And .modal-fullscreen-xl-down
makes it full screen if the screen is below 1200px wide.
We can make it always fullscreen by writing:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
Launch modal
</button>
<div class="modal modal-fullscreen" tabindex="-1" id='modal' data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
×
</button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
We can manipulate modals with JavaScript.
For instance, to show a modal with JavaScript, we can write:
const myModal = new bootstrap.Modal(document.getElementById('modal'), {
backdrop: true
})
myModal.show();
given that we have the following modal:
<div class="modal" tabindex="-1" id='modal' data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
×
</button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
We create the modal object with the bootstrap.Modal
constructor.
Then we call the show
method on the returned object to show the modal.
There’s also the hide
method to hide modals.
handleUpdate
readjusts the modal position automatically.
dispose
destroys the modal.
getInstance
gets the modal instance.
show.bs.modal
is emitted when the modal is showing.
shown.bs.modal
is emitted when the modal is shown.
hide.bs.modal
is emitted when the modal is hiding.
hidden.bs.modal
is emitted when the modal is hidden.
hidePrevented.bs.modal
is emitted when the modal is shown, its backdrop is static
and ca click outside the modal or with the escape key is performed or data-keyboard
is set to false
.
#software-development #programming #technology #javascript #web-development