Modal Show, Close, Hide & Toggle

Modal Backdrop

Methods for responsive Popup with Bootstrap 5. Show, hide / close or toggle a modal with JavaScript or via data attributes.

The modal plugin toggles your hidden content on demand, via JavaScript or data attributes

In order to fully use the methods described below, please make sure to read the API tab in our main Modals documentation. This helper page will simply provide you with some examples of most common JavaScript methods for Bootstrap modals.

Method Description
dispose Destroys an element’s modal.
getInstance Static method which allows you to get the modal instance associated with a DOM element
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.mdb.modal event occurs).
show Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.mdb.modal event occurs).
toggle Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.mdb.modal or hidden.mdb.modal event occurs).

Below you will find some of the most common use cases of modal methods. For usage via data attributes, please read the main documentation.

Modal Show

        
            
      const myModalEl = document.getElementById('myModal')
      const modal = new mdb.Modal(myModalEl)
      modal.show()

Modal Close / Hide

        
            
      const myModalEl = document.getElementById('myModal')
      const modal = new mdb.Modal(myModalEl)
      modal.hide()

Modal Toggle

        
            
      const myModalEl = document.getElementById('myModal')
      const modal = new mdb.Modal(myModalEl)
      modal.toggle()