ここぞという時のモーダルウインドウ

キャプチャ画像

時には嫌われかねないモーダルウインドウの効果的な使い方を考えてみました。

モーダルウインドウの良し悪し

このコンテンツ（記事）の機能はカスタムテンプレート【Volar】に搭載済みです。

モーダルウインドウ（あるいはモーダルダイアログ）というのは、画面に表示されたウインドウ（ダイアログ）を閉じるまでは他の操作ができなくなるウインドウ画面のことです。

（※モーダルウインドウとモーダルダイアログは厳密には異なりますが、ここでは同じものとして扱います）

たとえばページを閉じようとしたらいきなり画面中央付近にウインドウが出てきて、「本当に閉じていいんですか？」なんてダイアログが出るヤツもモーダルウインドウの一つです。

（あれは個人的には一番嫌いなヤツです）

エラーメッセージや警告表示が出て「はい or いいえ」のどちらかを選択しない限り他の操作ができなくなったり、期間限定の商品案内の通知画面などが出たりするのも同じです。

こういった画面がひんぱんに出てくると、「あ～、まただよ」「閉じるの、めんどくさ～」なんてぼやく方も多いんじゃないでしょうか。

そこに加えて内容が怪しげな宣伝文句だったりしたら、もう、ねえ。

そんな嫌われがちなモーダルウインドウですが、使い方次第では”本来の効果”を大いに発揮することもあります。

これにはいくつか条件があって、

カスタムテンプレート【Volar】にはこのモーダルダイアログの仕組みが搭載されてます。

あなたは規定のエリアに表示したい文言や画像を差し込むだけ。

『ページが開かれると同時にモーダルウインドウが開く』パターンと、『サイト訪問者が特定の語句や画像をクリックしたときに初めてモーダルウインドウが開く』2種類のパターンを用意してます。

具体的な画面レイアウトなどはこちら↓をご覧ください。

カスタムテンプレート【Volar】では簡単な設定でモーダルウインドウを表示させることができます。

問合せ画面やパスワードなどの入力用としてのモーダルウインドウはやめておいた方が無難です。

間違って「閉じる」ボタンを押してウインドウが消えてしまうと通常は入力した内容が消えてしまい、また最初からやり直しになっちゃいます。

これはサイト訪問者のストレスを一気に増やすだけなので、できればちゃんとした専用のページに移動するような形式にしておくべきです。