Modal-Dialog

Default

モーダル・ダイアログ

3年ほど前（2022年）になりますが、Modal Dialogコンポーネントの実装で議論した結果、jumpu UI のコンポーネントとしては実装しないことになりました。ただ、Headless UI 等のフレームワークに依存するまでもなく、ツクロアのボイラープレートでもJSXが利用可能になることなど、当時と状況が変わってきているため、このコンポーネントは試験的に Jumpu UI として実装を試みています。

このモーダルダイアログの背景はクールです。（MDNのサイト参照）

<dialog
  id="dialog-1"
  class="jumpu-modal-dialog jumpu-card -translate-1/2 fixed left-1/2 top-1/2"
  onclick="if(event.target !== document.querySelector('.dialog-content')){event.target.close()}"
>
  <button
    onclick="document.querySelector('#dialog-1').close()"
    class="jumpu-icon-button absolute right-2 top-2"
  >
    ✗
  </button>
  <div class="dialog-content min-h-64 px-8 py-4 pt-10">
    <p>このモーダルダイアログの背景はクールです</p>
  </div>
</dialog>

<button
  onclick="document.querySelector('#dialog-1').showModal()"
  class="jumpu-button m-40"
>
  ダイアログを表示
</button>