Basic Modal
Toggle a modal via JavaScript by clicking the button above. You can use modal to add dialogs to your site for lightboxes, user notifications, or completely custom content.
BorderLess Modal
Toggle a Boderless via JavaScript by clicking the button above. Use .modal-borderless
with .modalfor BorderLess modal.
Vertically Centered
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
Disabled Backdrop
You can disable the backdrop by using data-backdrop="false"
Modal Themes
Use class .bg-* with your .modal-header to change theme of modal
Modal Sizes
Add class .modal-{sm|lg|xl|full} with .modal-dialog to create a modal with
different size.
Modal with Login Form
Created Simple Login Form.
Scrolling long Content
If your content is longer you the page will autmatically adopt a scrollbar
Scrolling long Content Inside Modal
You can also create a scrollable modal that allows scroll the modal body by adding
.modal-dialog-scrollable to .modal-dialog.
Disabled Animation
For modals that simply appear rather than fade in to view, remove the .fade class from your
modal markup.
Modal Events
On Show Event
This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
On Shown Event
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).
On Hide Event
This event is fired immediately when the hide instance method has been called.
On Hidden Event
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
