What is a Bootstrap Modal?
How to create a basic Modal?
The following example shows how to create a basic modal:
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.
The code for smaller modal box:
The code for larger modal box:
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
- 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
remoteoption mentioned above.