<!-- src/components/modal-dialog.hbs -->
<div id="modal-dialog" class="modal-dialog">
    <button type="button" id="dialog-open" class="dialog-open">
    モーダルダイアログ<br />
    (モーダルウインドウ)を開く
  </button>
    <dialog id="dialog-panel" class="dialog-panel" role="dialog" aria-describedby="d-message">
        <p id="d-message" class="dialog-panel__paragraph" role="document">
            モーダルダイアログ(モーダルウインドウ)<br /> とはどんなものか知っていますか?
        </p>
        <div class="dialog-panel__buttons">
            <button type="button" id="dialog-yes" class="dialog__button">
        はい
      </button>
            <button type="button" id="dialog-no" class="dialog__button">
        いいえ
      </button>
        </div>
        <button type="button" id="dialog-close" class="dialog__close" aria-label="このモーダルダイアログを閉じる">
      ×
    </button>
    </dialog>
    <p class="dialog-response">
        ダイアログの返り値:<br /><em><span id="return-value"></span></em>
    </p>
</div>
<!-- src/components/modal-dialog.hbs -->
<div id="modal-dialog" class="modal-dialog">
  <button type="button" id="dialog-open" class="dialog-open">
    モーダルダイアログ<br />
    (モーダルウインドウ)を開く
  </button>
  <dialog
    id="dialog-panel"
    class="dialog-panel"
    role="dialog"
    aria-describedby="d-message"
  >
    <p id="d-message" class="dialog-panel__paragraph" role="document">
      モーダルダイアログ(モーダルウインドウ)<br />
      とはどんなものか知っていますか?
    </p>
    <div class="dialog-panel__buttons">
      <button type="button" id="dialog-yes" class="dialog__button">
        はい
      </button>
      <button type="button" id="dialog-no" class="dialog__button">
        いいえ
      </button>
    </div>
    <button
      type="button"
      id="dialog-close"
      class="dialog__close"
      aria-label="このモーダルダイアログを閉じる"
    >
      ×
    </button>
  </dialog>
  <p class="dialog-response">
    ダイアログの返り値:<br /><em><span id="return-value"></span></em>
  </p>
</div>
/* No context defined for this component. */

There are no notes for this item.