Government of
India
Powered by NeGD | MeitY Government of India® UX4G
Modal
Use the JavaScript modal plugin from UX4G to provide dialogs for lightboxes, user notifications, or entirely unique content to your website.
How it works #
Before getting started with UX4G's modal component, be sure to read the following as our menu options have recently changed.
- Modal development uses JavaScript, CSS, and HTML. They take up more space in the document than anything else and disable scrolling in the body> so that the modal content scrolls instead.
- The modal will immediately close if you click on its "backdrop". Only one modal window can be opened at once with UX4G. We don't allow nested modals since we think they provide bad user experiences.
- Modals employ position: fixed, which occasionally can be a little picky about how it renders. To prevent potential interference from other elements, always arrange your modal HTML in a top-level position. Nesting a .modal inside another fixed element will probably cause problems.
- There are some restrictions when utilizing modals on mobile devices once more because of position: fixed.
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', () => {
myInput.focus()
})Keep reading for demos and usage guidelines.
Examples #
Modal components #
The example of a static modal that follows has had its position and presentation modified. The modal header, modal body (needed for padding), and modal footer (optional) are all included. If at all possible, please give modal headers with dismiss actions or another clear dismiss action.
Modal title
Modal body text goes here.
Live demo #
The button below will open a functioning modal example. It will descend from the top of the page and fade in.
<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" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog shadow-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<i class="fa fa-ellipsis-v"></i>
</div>
<div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</div>
<div class="modal-footer"><button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div>
</div>
</div>
</div>
RESULT
Modal title
Static backdrop #
The modal will not close when clicked outside of when the backdrop is static. To give it a try, click the button below.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Launch static backdrop modal</button>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-sm shadow-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</div>
<div class="modal-footer"><button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Understood</button></div>
</div>
</div>
</div>
RESULT
Modal title
Scrolling long content #
Modals scroll independently of the page when they grow too long for the user's viewport or device. To see what we mean, try the demo below.
By including .modal-dialog-scrollable to .modal-dialog, you can also construct a scrollable modal that supports scrolling of the modal body.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal2">Launch demo modal</button>
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true">
<div class="modal-dialog modal-lg shadow-xl modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel2">Modal title</h5>
<i class="fa fa-ellipsis-v"></i>
</div>
<div class="modal-body">
This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and
demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed. This is some placeholder content to show the scrolling behavior for modals. Instead
of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the
viewport, scrolling will move the modal as needed. This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby
extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed. This is some placeholder content to
show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When
content becomes longer than the height of the viewport, scrolling will move the modal as needed. This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an
inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as
needed. This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and
demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed. This is some placeholder content to show the scrolling behavior for modals. Instead
of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the
viewport, scrolling will move the modal as needed. This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby
extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed. This is some placeholder content to
show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When
content becomes longer than the height of the viewport, scrolling will move the modal as needed. This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an
inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as
needed.
</div>
<div class="modal-footer"><button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save</button></div>
</div>
</div>
</div>
Modal title
Vertically centered #
Add .modal-dialog-centered to
.modal-dialog to vertically center the modal.
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>RESULT
Modal title
Modal title
Tooltips and popovers #
Can be inserted into modals as necessary. Any tooltips and popovers inside of modals are also immediately dismissed when they are closed .popovers and tooltips
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalPopovers">Launch demo modal</button>
<div class="modal fade" id="exampleModalPopovers" tabindex="-1" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>
This
<a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute." data-bs-container="#exampleModalPopovers">
button
</a>
triggers a popover on click.
</p>
<hr />
<h5>Tooltips in a modal</h5>
<p>
<a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">This link</a> and
<a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">that link</a> have tooltips on hover.
</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">Save changes</button></div>
</div>
</div>
</div>
RESULT
Using the grid #
Nest .container-fluid inside the .modal-body to use the UX4G grid system within a modal. Use the grid system classes as you would anywhere else after that.
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>Varying modal content #
Have several buttons that each open a modal with somewhat different content? Depending on which button was selected, the contents of the modal can be altered using HTML data-bs-* properties and event .relatedTarget.
A live demo and sample HTML and JavaScript are provided below. Read the modal events documents for additional information on relatedTarget.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalVary" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalVary" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalVary" data-bs-whatever="@getUX4G">Open modal for @getUX4G</button>
<div class="modal fade" id="exampleModalVary" tabindex="-1" aria-labelledby="exampleModalLabelVary" 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-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name"/>
</div>
<div class="mb-3">
<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">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>RESULT
New message
const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
// Button that triggered the modal
const button = event.relatedTarget
// Extract info from data-bs-* attributes
const recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
const modalTitle = exampleModal.querySelector('.modal-title')
const modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = `New message to ${recipient}`
modalBodyInput.value = recipient
})Toggle between modals #
With some smart positioning of the data-bs-target and data-bs-toggle properties, you can switch between numerous modals. For instance, it may trigger a password reset modal from a sign-in modal that is already open. Please be aware that more than one modal cannot be active at once; this technique just switches between two different modals.
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">Show a second modal and hide this one with the button below.</div>
<div class="modal-footer"><button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button></div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">Hide this modal and show the first with the button below.</div>
<div class="modal-footer"><button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button></div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
RESULT
Modal 1
Modal 2
Change animation #
The transform state of the .modal-dialog before the modal fade-in animation is determined by the $modal-fade-transform variable, and the transform state of the .modal-dialog after the modal fade-in animation is determined by the $modal-show-transform variable.
For instance, you can use $modal-fade-transform: scale(.8) if you want a zoom-in motion.
Remove animation #
For modals that simply appear rather than fade in to view, remove
the .fade class from your modal markup.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Dynamic heights #
Must use myModal.handleUpdate() to reposition the modal in case a scrollbar emerges if the height of a modal changes while it is active.
Accessibility #
Make sure to include aria-labelledby="..." in the .modal file, referring the modal title. With aria-describedby on .modal, developer can now provide a description of your modal dialog. Keep in mind that since it is already added role="dialog" via JavaScript, developers doesn't need to add it.
Embedding YouTube videos #
Additional JavaScript, not included in UX4G, is needed to embed YouTube videos in modals so that playback will stop automatically and other things. For more details, please refer to this informative Stack Overflow thread.
Optional sizes #
Modals can be placed on a .modal-dialog in one of three alternative sizes that are accessible through modifier classes. To prevent horizontal scrollbars on viewports with narrower widths, these sizes take effect at specific breakpoints.
| Size | Class | Modal max-width |
|---|---|---|
| Small | .modal-sm |
300px |
| Default | None | 500px |
| Large | .modal-lg |
800px |
| Extra large | .modal-xl |
1140px |
Our default modal without modifier class constitutes the “medium” size modal.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Fullscreen Modal #
Through the use of modifier classes added to a .modal-dialog, it is also possible to alter the default behavior and open a modal that completely encloses the user viewport.
| Class | Availability | |
|---|---|---|
.modal-fullscreen |
Always | |
.modal-fullscreen-sm-down |
576px |
|
.modal-fullscreen-md-down |
768px |
|
.modal-fullscreen-lg-down |
992px |
|
.modal-fullscreen-xl-down |
1200px |
|
.modal-fullscreen-xxl-down |
1400px |
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
CSS #
Variables #
Added in v1.0.2
Modals now leverage local CSS variables on .modal and .modal-backdrop for improved real-time customization as part of UX4G's growing CSS variables strategy. Sass is used to set the values for the CSS variables, therefore Sass customization is still available.
--#{$prefix}modal-zindex: #{$zindex-modal};
--#{$prefix}modal-width: #{$modal-md};
--#{$prefix}modal-padding: #{$modal-inner-padding};
--#{$prefix}modal-margin: #{$modal-dialog-margin};
--#{$prefix}modal-color: #{$modal-content-color};
--#{$prefix}modal-bg: #{$modal-content-bg};
--#{$prefix}modal-border-color: #{$modal-content-border-color};
--#{$prefix}modal-border-width: #{$modal-content-border-width};
--#{$prefix}modal-border-radius: #{$modal-content-border-radius};
--#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
--#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
--#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
--#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
--#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
--#{$prefix}modal-header-border-color: #{$modal-header-border-color};
--#{$prefix}modal-header-border-width: #{$modal-header-border-width};
--#{$prefix}modal-title-line-height: #{$modal-title-line-height};
--#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
--#{$prefix}modal-footer-bg: #{$modal-footer-bg};
--#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
--#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
--#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
--#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
--#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
Sass variables #
$modal-inner-padding: $spacer;
$modal-footer-margin-between: .5rem;
$modal-dialog-margin: .5rem;
$modal-dialog-margin-y-sm-up: 1.75rem;
$modal-title-line-height: $line-height-base;
$modal-content-color: null;
$modal-content-bg: $white;
$modal-content-border-color: var(--#{$prefix}border-color-translucent);
$modal-content-border-width: $border-width;
$modal-content-border-radius: $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs: $box-shadow-sm;
$modal-content-box-shadow-sm-up: $box-shadow;
$modal-backdrop-bg: $black;
$modal-backdrop-opacity: .5;
$modal-header-border-color: var(--#{$prefix}border-color);
$modal-header-border-width: $modal-content-border-width;
$modal-header-padding-y: $modal-inner-padding;
$modal-header-padding-x: $modal-inner-padding;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility
$modal-footer-bg: null;
$modal-footer-border-color: $modal-header-border-color;
$modal-footer-border-width: $modal-header-border-width;
$modal-sm: 300px;
$modal-md: 500px;
$modal-lg: 800px;
$modal-xl: 1140px;
$modal-fade-transform: translate(0, -50px);
$modal-show-transform: none;
$modal-transition: transform .3s ease-out;
$modal-scale-transform: scale(1.02);Loop #
Responsive fullscreen modals are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");
@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
.modal-content {
height: 100%;
border: 0;
@include border-radius(0);
}
.modal-header,
.modal-footer {
@include border-radius(0);
}
.modal-body {
overflow-y: auto;
}
}
}
}Usage #
The modal plugin uses JavaScript or data attributes to turn on and off your concealed content as needed. Additionally, it alters the way scrolling works by default and creates a .modal-backdrop that acts as a click area for hiding shown modals when clicked outside of them.
Via data attributes #
Toggle #
Use JavaScript without writing it to activate a modal. To target a specific modal to toggle, add data-bs-toggle="modal" to a controller element, such as a button, along with data-bs-target="#foo" or href="#foo".
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Dismiss #
Dismissal can be achieved with the data attribute on
a button within the modal as demonstrated
below:
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
or on a button outside the modal using the
data-bs-target as demonstrated below:
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Via JavaScript #
Create a modal with a single line of JavaScript:
const myModal = new UX4G.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new UX4G.Modal('#myModal', options)
Options #
Data-bs-animation can have an option name appended to it, for example, data-bs-animation="{value}" since options can be provided through data attributes or JavaScript. When sending the choices via data attributes, be sure to modify the case type of the option name from "camelCase" to "kebab-case." Use data-bs-custom-class="beautifier" as opposed to data-bs-customClass="beautifier," for instance.
Since UX4G 1.0.0, all components are compatible with the experimental reserved data attribute data-bs-config, which can store a JSON string for basic component setting. When an element has the data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the individual data attributes will take precedence over the values specified on the data-bs-config. Additionally, JSON variables like data-bs-delay='{"show":0,"hide":150}' can be stored in existing data attributes.
| Name | Type | Default | Description |
|---|---|---|---|
backdrop |
boolean, 'static' |
true |
Includes a modal-backdrop element.
Alternatively, specify static for a
backdrop which doesn’t close the modal when
clicked. |
focus |
boolean | true |
Puts the focus on the modal when initialized. |
keyboard |
boolean | true |
Closes the modal when escape key is pressed. |
Methods #
Asynchronous methods and transitions
Every API method begins a transition and is asynchronous. When the transition begins, they call the caller back before it ends. A method call on a component that is transitioning will also be disregarded.
See our JavaScript documentation for more information.
Passing options #
Activates your content as a modal. Accepts an optional options object.
const myModal = new UX4G.Modal('#myModal', {
keyboard: false
})
| Method | Description |
|---|---|
dispose |
Destroys an element’s modal. (Removes stored data on the DOM element) |
getInstance |
Static method which allows you to get the modal instance associated with a DOM element. |
getOrCreateInstance |
Static method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn’t initialized. |
handleUpdate |
Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). |
hide |
Manually hides a modal. Returns to the
caller before the modal has actually been
hidden (i.e. before the
hidden.bs.modal event occurs). |
show |
Manually opens a modal. Returns to the
caller before the modal has actually been
shown (i.e. before the
shown.bs.modal event occurs). Also,
you can pass a DOM element as an argument that
can be received in the modal events (as the
relatedTarget property). (i.e.
const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)
|
toggle |
Manually toggles a modal. Returns to the
caller before the modal has actually been
shown or hidden (i.e. before the
shown.bs.modal or
hidden.bs.modal event occurs). |
Events #
UX4G’s modal class exposes a few events for hooking into modal
functionality. All modal events are fired at the modal itself
(i.e. at the <div class="modal">).
| Event | Description |
|---|---|
hide.bs.modal |
This event is fired immediately when the
hide instance method has been
called. |
hidden.bs.modal |
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
hidePrevented.bs.modal |
This event is fired when the modal is shown, its
backdrop is static and a click
outside of the modal is performed. The event is
also fired when the escape key is pressed and
the keyboard option is set to
false. |
show.bs.modal |
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. |
shown.bs.modal |
This event is fired when the modal has been made
visible to the user (will wait for CSS
transitions to complete). If caused by a click,
the clicked element is available as the
relatedTarget property of the
event. |
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
// do something...
})
