ページを開いたらすぐ出てくる「モーダルウィンドウ」の作り方

ページを開いたら、ポップアップですぐに出てくる「モーダルウィンドウ」の作り方をお伝えします。

具体的には、このページを開いたときに画面が少し暗くなって、真ん中にウインドウが表示されたと思います。これが「モーダルウィンドウ」です。

（もう一度見るには、このページの再読み込みか、こちらのページをご覧ください）

モーダルウィンドウは、訪問者に伝えたい情報をダイレクトに伝えることができるというメリットがあります。

ただ、モーダルウィンドウを対処しないと、ページを見ることができないため、わずらわしさを感じる人もいるというデメリットもあります。

使い方次第にはなりますが、このような「モーダルウィンドウ」の作り方をお伝えしますね。（コピペのみでできます）

■ ページを開いたらすぐ出てくる「モーダルウィンドウ」の作り方の手順

手順１：CSSファイル（style.css）に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。

上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。（一番下に、上記のソースを追加するのが、分かりやすいと思います）

手順２：モーダルウィンドウを表示したいページの </body>タグの真上に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、</body>タグの真上に貼り付けてください。

上記のソースを入れる場所は、HTMLファイルの最も下の方にある、</body>タグの真上です。

ソースを入れる場所については、注意してください。

手順３：上記のソースを入れたページを開いて、モーダルウィンドウが表示されることを確認する。

上記のソースを入れたページ（たとえば index.htmlのページ）を開いて、こちらのページのような、「モーダルウィンドウ」が表示されたら、確認作業は完了です。

■【カスタマイズ方法】モーダルウィンドウの文面を変える方法

モーダルウィンドウの文面は、HTMLファイルに入れたソースの日本語部分を、自由に変更することができます。

具体的には、下記の箇所です。

<div class="modal-title">モーダルウィンドウ</div>
<p>このような「モーダルウィンドウ」を出すことができます。<br>現在は、ページが開いてから２秒後に表示される仕様にしています。</p>

もちろん、モーダルウィンドウの中に、リンクを入れることもできますし、画像を表示することもできます。

これについては、自由に変更してくださいね。

■【カスタマイズ方法】ウィンドウが表示される秒数を変える方法

モーダルウィンドウが表示されるまでの秒数は、HTMLファイルに入れたソースの下記の箇所で指定しています。

window.onload = function() {
setTimeout(function() {
modal.style.display = "block";
}, 2000);
}

上記の「2000」という箇所です。

これは「2秒」という意味になるので、たとえば、ページが開いてモーダルウィンドウを0秒後（即時）に表示したい場合は、「2000」を「0」に変更します。

■【カスタマイズ方法】モーダルウィンドウの背景色を変える方法

モーダルウィンドウの背景色は、CSSファイル（style.css）に入れた記述を修正することで、色を変えることができます。

たとえば、「modal-content」の中にある「background-color: #fefefe;」の箇所を、「background-color: #33ff33;」などに変更することで、モーダルウィンドウの背景色を変えることができますよ。

これについても、自由に変更してくださいね。

■【注意点】モーダルウィンドウのデメリットについて

モーダルウィンドウは、訪問者に伝えたい情報をダイレクトに伝えることができるというメリットがあります。

ただ、強制的にいきなり画面上にウィンドウが出てくるため、「邪魔だな」と思う人もいるかもしれません。そのため、使い方をよく考えて、使うようにしましょう。

多くのページでモーダルウィンドウを使わないようにして、本当に必要なページだけで使うようにしましょうね。