Bootstrap 5 — Customize Modals

Spread the love

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.

Change Animation

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">
          <span aria-hidden="true">&times;</span>
        </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>

Dynamic Heights

We can change the height dynamically with JavaScript by calling the myModal.handleUpdate() to change it.

Optional Sizes

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">
          <span aria-hidden="true">&times;</span>
        </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.

Fullscreen Modal

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">
          <span aria-hidden="true">&times;</span>
        </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>

JavaScript

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">
          <span aria-hidden="true">&times;</span>
        </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.

Events

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 .

Conclusion

We can use JavaScript to manipulate modals.