Bootstrap 4 Modal Tutorial

What is a Bootstrap Modal?

The Bootstrap 4 Modal is a flexible and responsive JavaScript popup, dialog or alert window. Websites that are built over Bootstrap can use the modal to display videos, images or social media buttons. The Bootstrap Modal popup can be easily closed by clicking on the close button or by clicking outside the modal window.

View Modals Demo

 

How to create a basic Modal?

The following example shows how to create a basic modal:

Try It Yourself

 

Modal size

Modals have a default size of medium. You can change the size by adding “.modal-lg” or “.modal-sm” class to the “.modal-dialog” class.

 

Small size

The code for smaller modal box:

 

 

Larger size

The code for larger modal box:

 

Remove animation

If you want to remove the fade-in/fade-out effect, you have to remove the .fade class from your modal markup.

 

Bootstrap modal’s events

You can customize the behavior of the Bootstrap modal by using various events that are triggered while opening and closing the modal. These events have to be bound using jQuery’s .on()method.

      • show.bs.modal: → before the modal is open.
      • shown.bs.modal: → after the modal is shown.
      • hide.bs.modal: → before the modal is hidden.
      • hidden.bs.modal:→ after the modal is closed.
      • loaded.bs.modal: → when remote content is successfully loaded in the modal’s content area using the remote option mentioned above.

 

Example:

 

Leave a Reply

Your email address will not be published. Required fields are marked *