Bootstrap 5 - Modal
Bootstrap modals are built with HTML, CSS, and JavaScript. It is used in a website for dialogs box, lightboxes, user notifications, or custom content. They are positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead. To invoke modal use JavaScript modal plugin.
To create a modal box: create a div with .modal & .fade class, inside it create a div with .modal-dialog class, inside it create a div with .modal-content class, inside it create 3 div's with .modal-header for modal heading, .modal-body for modal content, .modal-footer for modal footer content, inside .modal-header use .modal-title for title heading. To invoke modal on button click, create a button with attributes: data-bs-toggle="modal", data-bs-target="#id", mention the id of data-bs-target in .modal div.
Example 1: Bootstrap 5 Modal on button click. 1
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
<div class="modal fade" id="exampleModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>An owl is the wisest of all birds because the more it sees the less it talks.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Action Button</button>
</div>
</div>
</div>
</div>
Example 2: Show Bootstrap Modal on page load, add custom javascript code for autoload modal. 1
<h2>Bootstrap 5 - Show Modal on page load</h2>
<div class="modal fade" id="ModalAutoShow">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-5" id="exampleModalLabel">Bootstrap 5 - Show Modal on page load</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>An owl is the wisest of all birds because the more it sees the less it talks.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Action Button</button>
</div>
</div>
</div>
</div>
<script>
//add javascript to load modal box automatically on page load.
var myModal = new bootstrap.Modal(document.getElementById('ModalAutoShow'))
myModal.show()
</script>
Static backdrop
When backdrop is set to static, the modal will not close when clicking outside of it. Add data-bs-backdrop="static" in modal div.
Example 3: Bootstrap static backdrop. 1
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Launch demo modal</button>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>This is static modal box, and will not close on clicking outside modal!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Action Button</button>
</div>
</div>
</div>
</div>
Scrolling long content
When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Add class .modal-dialog-scrollable in .modal-dialog
Example 4: Bootstrap Scrolling long content 1
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#longcontent">Launch long content modal</button>
<div class="modal fade" id="longcontent">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>An owl is the wisest of all birds because the more it sees the less it talks.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>Long content modal with scrollbar</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Action Button</button>
</div>
</div>
</div>
</div>
Bootstrap Modal Sizes
Modal have three optional sizes i.e. .modal-sm, none, .modal-lg, .modal-xl, available via modifier classes to be placed on a .modal-dialog.
Example 5: Bootstrap Modal sizes 1
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sizesmall">Launch Small modal</button>
<div class="modal fade" id="sizesmall">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>An owl is the wisest of all birds because the more it sees the less it talks.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Action Button</button>
</div>
</div>
</div>
</div>
