<button type="button" class="dialog__modeless-button">
modeless
</button>
<button type="button" class="dialog__modal-button">
modal
</button>



<dialog>
  <div class="dialog__inner">
    <h2 class="dialog__heading">モーダルダイアログ</h2>
    <button type="button" class="dialog__close-button">
      モーダルダイアログを閉じる
    </button>
  </div>
</dialog>

<ul>
  <li><a href="/">アイテム</a></li>
  <li><a href="/">アイテム</a></li>
  <li><a href="/">アイテム</a></li>
</ul>

const modelessDialogButton = document.querySelector('.dialog__modeless-button');
const modalDialogButton = document.querySelector('.dialog__modal-button');
const closeDialogButton = document.querySelector('.dialog__close-button');
const dialog = document.querySelector('dialog');

modelessDialogButton.addEventListener('click', () => {
  dialog.show();
});

modalDialogButton.addEventListener('click', () => {
  dialog.showModal();
});

closeDialogButton.addEventListener('click', () => {
  dialog.close();
});