MENU
Modal
A modal is a generic dialog box. Only one modal can appear at any point in time.
As the modal slides down, the page dims in the background.
RESETRUNFULL
If you don't want to close the modal when the user clicks outside it or press the ESC key, you can do this:
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
<style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Close this modal by clicking 'Close', clicking outside the modal, or pressing the ESC key.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body><html><div class="modal fade" data-backdrop="static" data-keyboard="false"…
To create a vertically centered modal with a vertical scrollbar:
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
You can place a container inside the body:<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">1A
<div class="col-md-4 ml-auto">1B
</div>
<div class="row">
<div class="col-md-3 ml-auto">2A
<div class="col-md-2 ml-auto">2B
</div>
</div>
Remove the 'fade' class so that the modal simply fades into view: <div class="modal"…You can specify the width of the modal:
<div class="modal-dialog modal-sm"... max 300px
<div class=" modal-dialog modal"... max 500px
<div class=" modal-dialog modal-lg"... max 800px
<div class=" modal-dialog modal-xl"... max 1140px
Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog:
.modal-fullscreen
.modal-fullscreen-sm-down
.modal-fullscreen-md-down
.modal-fullscreen-lg-down
.modal-fullscreen-xl-down
JavaScript:
You can pass data into a modal dynamically with the data-X attribute.
RESETRUNFULL
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
<style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">
Open modal for @getbootstrap
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">…</div>
</div>
</div>
</div>
<script>
var exampleModal = document.getElementById('exampleModal');
exampleModal.addEventListener('show.bs.modal',event=>{
var recipient = event.relatedTarget.getAttribute('data-whatever');
exampleModal.querySelector('.modal-title').textContent = 'New message to ' + recipient;
exampleModal.querySelector('.modal-body input').value = recipient;
});
</script>
</body><html>Options:
| backdrop: Include a modal-backdrop element. Defaults to 'true'. Alternatively, specify 'static' for a backdrop that doesn't close the modal on click. |
| keyboard: Close the modal when the ESC key is pressed. Defaults to 'true'. |
| focus: Focus on the modal during initialization. Defaults to 'true'. |
| show: Shows the modal when initialized. Defaults to 'true'. |
var myModal = new bootstrap.Modal(document.getElementById('myModal'), { keyboard: false});
myModal.toggle();
myModal.show();
myModal.hide();
myModal.handleUpdate();
myModal.dispose();var myModalEl = document.getElementById('myModal');
var modal = bootstrap.Modal.getInstance(myModalEl); // Returns a Bootstrap modal instance
myModalEl.addEventListener('hidden.bs.modal', (e)=>{ // do something...})
/* other events:
show.bs.modal
shown.bs.modal
hide.bs.modal
hidePrevented.bs.modal
*/