Open6

あいまいな理解を止めるためのメモ

ryo_kawamataryo_kawamata

Dialog要素

https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog

Dialog要素の開閉

開く

以下のいずれかの実行。

  • open属性を追加
  • HTMLDialogElement.show()
  • HTMLDialogElement.showModal()

showModal()のみ以下の特徴がある。

  • ::backdrop擬似要素が追加される
  • aria-modal="true" となる
  • Dialog背面の要素は不活性となり操作不可になる
  • EscキーでDiaogを閉じることができる。

閉じる

以下のいずれかの実行。

  • Dialog要素内でmethod="dialog"のformを追加し、そのformを送信する
  • HTMLDialogElement.close()の実行
  • Escキー ※showModal()で開いた場合のみ

※ 閉じるDialogはそのformを内包するDialogのみ。

サンプル

下記サンプルだと、Dialog2.show()、Dialog1.show() の順番で押しても、Dialog1はDialog2に隠されてしまう。それは、HTMLのマークアップ上でDialog2が下（前面）にあるため。ただ、Dialog2.show()、Dialog1.showModal()の順に押すと、HTMLのマークアップの順番を無視してDialog1が前面に表示される。これは、showModal()の方はTop Layerに表示されるため。

ryo_kawamataryo_kawamata

Top Layer

https://developer.mozilla.org/en-US/docs/Glossary/Top_layer

is 何？

  • ビューポートの幅と高さ全体にまたがる特別なレイヤー
  • ページにあるすべてのレイヤーの上に配置される
  • 新しいスタッキング・コンテキストを生成する

Top Layerを生成する方法

  • Element.requestFullscreen() の呼び出しが成功してフルスクリーンモードで表示されるようになった要素
  • showModal()で呼び出したdialog要素
  • showPopover()で呼び出したpopover要素

その他メモ

  • Top Layerを複数作ることはできるの？
    • Element.requestFullscreen()を複数回実行して複数つくることはできる。
      • 後に実行した要素が上に配置される
      • Escキーを押すとすべて解除される
ryo_kawamataryo_kawamata

Scroll高さ・幅周りのもろもろ