ダイアログ入門

一般的に普及したユーザーインターフェイスとしてダイアログというものがあります。
Webアプリケーションなどにおいては、ユーザーのアクションに応じて画面の最上位レイヤーに新しいボックスが現れて、ユーザーに通知を行ったり更にアクションを求めるために使用されます。

フロントエンドエンジニアとしてUIを作っていましたがダイアログというUIに関して間違った認識を持っていたり、あまり知らない部分があったのでまとめておきます。

ダイアログの種類

まずは、ダイアログと呼ばれるUIには大きく分けて２つの種類が存在します。

フロントエンドエンジニアとしては「モーダルダイアログ」のほうが聞き馴染みのある単語だと思います。また、ダイアログというUI全体を「モーダル」と呼ぶ方も少なくないと思っています。

まずこの２つのUIの違いはダイアログが現れた場合に背景の要素やウインドウを操作できるかできないかという基準を元に呼び分けられています。

まずは、モードレスダイアログとの最大の違いである背景の要素やウインドウの操作ができないという点について確認していきます。