モーダルウィンドウの作り方とソース

モーダルウィンドウは元の画面に重ねるように表示させる別の画面のことです。文章で読んでもわかりにくいので、下記のサンプルを確認してください。

表示している画面に、別のウインドウを重ねて表示させるのが、モーダルウィンドウの特徴です。ユーザーはモーダルウィンドウに対して一定の操作をしなければ、他のことができません。このため、モーダルウィンドウの内容はかなりの高確率で、ユーザーの目に入ります。

つまり、非常に目立ちます。使い方としては、ユーザーに絶対に見てほしいことや、重要な情報を盛り込むのが定番。「OK」や「閉じる」ボタンを押さないと先に進めないので、何らかのアクションをしてほしい時にも役立つでしょう。

TItleH3:どんな時につかわれるの？

具体的には、ショッピングサイトでクーポンを発行したときや、お問い合わせフォームで誤入力したときに使用される場面が多いと思います。

他には、執拗にウイルス感染の通知を出す詐欺サイトでも使われます。

モーダルウィンドウは高確率でユーザーに情報を認知してもらえますが、その内容がユーザーにとって望ましくない場合、印象は悪化します。また、頻繁に表示するのも好ましくはないでしょう。使いどころを失敗すると、ユーザーは「邪魔、面倒」と感じて、ブラウザバックしてしまいます。

モーダルウインドウは、HTMLとCSSでデザインを作り、JavaScriptで表示・非表示を切り替えるのが定番と言えます。HTMLとCSSで作ったデザインは最初は非表示で、何らかのきっかけでJavaScriptでクラスを付与し、表示させるわけです。

きっかけは色々ありますが、例えばウインドウを開いた時や、ある程度スクロールしたとき、望ましくない操作をした時などが挙げられます。これらの発火条件を指定しておいて、条件を満たしたら、表示させるためのクラスをJavaScriptにより付与するわけです。

モーダルウインドウのソースコード

まとめ

モーダルウィンドウの作り方を紹介しました。お役に立ちましたら幸いです。