Toggle the Modal You can toggle a modal either by adding the data-bolt-modal-target data attribute to a trigger element, or by calling the Modal's show() and hide() methods directly via JavaScript. Data attribute Use the data attribute data-bolt-modal-target on a trigger element to toggle a modal. The value of the data attribute must be a valid CSS selector that matches your target modal. When you click the trigger the modal will show if currently hidden or it will hide if currently shown. Demo Open Modal This modal was shown via the data-bolt-modal-target data attribute. The same data attribute is used on the button below to hide the modal. Close Modal JavaScript Use the Modal's show() and hide() methods to toggle a modal. Before calling any methods on the modal you must first wait for the Modal component to be ready. See the demo below for reference. Demo Open Modal This modal was shown by calling the show() method. The hide() method will be called when you click the button below. Close Modal Custom JavaScript <script> const modal = document.querySelector('.js-bolt-modal--js-demo'); const showButton = document.querySelector('.js-bolt-modal-trigger--open'); const hideButton = document.querySelector('.js-bolt-modal-trigger--close'); // Promise ensures Modal is defined before calling hide/show customElements.whenDefined('bolt-modal').then(() => { showButton.addEventListener('click', () => { modal.show(); }) hideButton.addEventListener('click', () => { modal.hide(); }) }); </script>