Modals are defined as lightweight enclosed boxes that are used to display the dialogue with contents, alerts, warnings, or any user notifications. These modals are built entirely using customizable contents.

It is built using HTML, CSS, and JavaScript along with a backdrop present on it so that the modals can be closed. Bootstrap’s modals are fixed with a particular position and can display only one window at a time. Nested modals aren’t supported.

For example,

Var firstModal= document.getElementById('firstModal')

var modalinput = document.getElementById('modalinput')

firstModal.addEventListener('shown.bs.modal', function () {

  modalinput.focus()

})

Let’s look over some other components that can be applied using modal. Beginning with the static Modal, that includes over the hidden position. You can add a live demo on the screen for the reader which will have a clickable button and on clicking will open a modal.

When the modal contents turn longer, an attribute titled scroll long content can be added. Hence, for longer content need to add a scrollable slider. This can be added under class using a parameter .modal-dialog-scrollable in the class. To vertically depict content, you can use the .modal-dialog-centered attribute under the class. 

You can add tooltips and popovers within the model so on closing the modal, the tooltips and popovers are automatically closed. The dynamic changes, animations, toggles can be experimented with modals to get the desired result