Modal Examples
Live examples of the Modal widget showing different sizes, configurations, and triggers.
1. Basic Modal
Standard modal with header, body, and footer.
Basic Modal
This is a standard modal dialog. It can contain text, forms, or any other HTML content.
Click the backdrop or the close button to dismiss it.
JavaScript
FormWidgets.init('#modal1', 'Modal', {
trigger: '#btn1'
});2. Modal Sizes
Use fw-modal-sm, fw-modal-lg, or fw-modal-xl on the dialog element.
Small Modal
Compact content goes here.
Large Modal
This modal has more width (max 800px) for displaying larger content like tables or grids.
HTML
<div class="fw-modal-dialog fw-modal-sm">...</div>
<div class="fw-modal-dialog fw-modal-lg">...</div>3. Static Backdrop
Prevent closing when clicking outside the modal using closeOnOverlay: false.
Static Backdrop
You must click the button below to close this modal.
JavaScript
FormWidgets.init('#modal-static', 'Modal', {
trigger: '#btn-static',
closeOnOverlay: false
});