boost_js_modal_init_and_open_with_event_listeners.ts

1import { Modal } from '@boost-js/modal';
2
3// Select the trigger element and the modal container
4const trigger = document.querySelector<HTMLElement>('#modal-trigger');
5const modalElement = document.querySelector<HTMLElement>('#my-modal');
6
7if (trigger && modalElement) {
8  // Initialize the modal instance
9  const modal = new Modal(modalElement, {
10    // Optional configuration
11    closeOnEsc: true,
12    closeOnOutsideClick: true,
13  });
14
15  // Attach event listener to open the modal
16  trigger.addEventListener('click', () => {
17    modal.show();
18  });
19
20  // Example of listening to the shown event
21  modalElement.addEventListener('shown.bs.modal', () => {
22    console.log('Modal is now visible');
23  });
24}