https://global.honda/en/common/modules-2026/assets/scripts/modules/Dialog.js

1const config = {
2  // selector
3  closeButtonSelector: '.js-dialog__closeButton',
4
5  // class name
6  stateClassName: 'is-dialog-opened',
7};
8
9export const setDialog = (element) => {
10  /** @type {HTMLElement} ダイアログを表示するトリガー */
11  const button = element;
12  /** @type {string} ダイアログ本体に付与されたID属性値 */
13  const dialogId = button.dataset.dialogTarget;
14  /** @type {HTMLDialogElement} ダイアログ本体 */
15  const dialog = document.getElementById(dialogId);
16  /** @type {NodeListOf<HTMLButtonElement>} 閉じるボタン */
17  const closeButtons = dialog.querySelectorAll(config.closeButtonSelector);
18
19  if (!dialogId || dialogId === '' || !dialog) {
20    return;
21  }
22
23  const showDialog = () => {
24    dialog.showModal();
25  };
26
27  const hideDialog = () => {
28    dialog.close();
29  };
30
31  const bindEvent = () => {
32    button.addEventListener('click', (event) => {
33      event.preventDefault();
34      showDialog();
35    });
36
37    closeButtons.forEach((closeButton) => {
38      closeButton.addEventListener('click', () => {
39        hideDialog();
40      });
41    });
42  };
43
44  bindEvent();
45};