JavaScript

JavaScriptでモーダル表示する方法【プラグイン、jQuery不使用】

  /

モーダルウィンドウを実装する際、jQueryなどの外部ライブラリを使用せずにJavaScriptとCSSだけで実現できるシンプルな方法を紹介します。モーダルウィンドウとは、ページ内に表示されるポップアップのような要素で、画面全体を覆って注目を集めることができるため、ユーザーに特定の情報を伝えたい時に非常に有効です。

複雑な動きやアニメーションを加えることなく、最低限の表示効果を目指す場合、CSSとJavaScriptの標準的な機能を組み合わせることで、効率よく実装できます。このような軽量なモーダル表示は、ページのパフォーマンス向上にもつながり、モバイル端末などリソースの少ない環境でもスムーズに動作します。

この記事では、簡単にモーダルウィンドウを作成するための手順を、具体的なコードとともに解説します。Webサイトに必要な最小限のモーダル表示機能を追加したい場合にぜひ参考にしてください。

Contents

モーダル表示するCSSの記述

まず、モーダルウィンドウの表示と非表示を制御するための基本的なCSSを書いていきます。CSSの役割は、モーダルエリアのレイアウトや表示状態をコントロールすることであり、ユーザーがクリックした際にモーダルが画面中央に表示されるように設定します。

以下のコードは、モーダルウィンドウの背景や内容エリアのスタイルを定義しています。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
#modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
}
.content{
  background-color:#ffffff;
  width: 500px;
  margin: 20% auto 0 auto;
  padding: 50px;
  text-align: center;
}
.content p{
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 20px;
}
</style>

　
解説:

  • #modalセレクタでは、モーダルウィンドウの初期状態をdisplay: none;として非表示にしています。
  • position: fixed;を使用して、ウィンドウのサイズに関係なくモーダルが常に画面の中心に表示されるように設定しています。
  • 背景色には半透明の黒を指定し、メインコンテンツを強調できるようにしています。

モーダル表示エリアとボタンのHTML記述

次に、HTML内でモーダルエリアと、それを表示・非表示にするためのボタンを定義します。この例では、モーダルウィンドウを表示するために「モーダル表示」ボタンを設置し、そのボタンがクリックされた際にモーダルエリアが表示されます。

<h1>「モーダル表示」ボタンをクリックすると「モーダル表示エリア」が表示されます。</h1>

<div id="modal">
  <div class="content">
      <p>モーダル表示エリア</p>
      <input type="button" id="close" value="閉じる">
  </div>
</div>

<input type="button" id="bt" value='モーダル表示'>

　
解説:

  • id=”modal”はモーダル表示エリアを定義しており、この中に表示したいコンテンツを配置します。
  • id=”bt”のボタンをクリックすると、モーダルウィンドウが表示されます。
  • モーダルエリア内には「閉じる」ボタンを配置し、ユーザーがモーダルウィンドウを閉じる操作が可能です。

モーダル表示を制御するJavaScriptの記述

最後に、JavaScriptでボタンのクリックイベントを処理し、モーダルウィンドウの表示・非表示を切り替えるスクリプトを追加します。モーダル表示の操作は非常にシンプルで、ボタンクリック時にモーダルエリアのdisplayプロパティを変更するだけです。

<script type="text/javascript">
var bt = document.getElementById('bt');
var modal = document.getElementById('modal');
var close = document.getElementById('close');

bt.addEventListener('click', function() {
  modal.style.display = 'block';
})
close.addEventListener('click', function() {
  modal.style.display = 'none';
})
</script>

　
解説:

  • document.getElementById(‘bt’)で「モーダル表示」ボタンを取得し、クリックイベントを設定しています。クリックされると、modal.style.display = ‘block’;によりモーダルが表示されます。
  • 同様に、document.getElementById(‘close’)で「閉じる」ボタンを取得し、クリックされたときにモーダルエリアが非表示になるようにしています。

この方法はjQueryなどの外部ライブラリに依存せず、純粋なJavaScriptだけで実現できるため、ページのパフォーマンスに影響を与えず、シンプルにモーダルを表示したいときに最適です。

jQueryを使用せずJavaScriptでモーダル表示するデモページ

以下のデモページで実際の動作を確認してみてください。

jQueryを使用せずJavaScriptでモーダル表示するデモ

まとめ

モーダルウィンドウは、ユーザーに重要な情報を伝えるための強力な手段です。今回紹介した方法は、シンプルなCSSとJavaScriptを組み合わせた軽量な実装であり、外部ライブラリに依存せずに利用できる点が大きな利点です。

さらに、必要に応じてスタイルや機能を拡張することで、より複雑なモーダルウィンドウを作成することも可能です。例えば、フェードイン・フェードアウトのアニメーションを加えたり、サイズやデザインを変更するなど、ユーザーのニーズに合わせてカスタマイズすることができます。

モーダルウィンドウの使い方は多岐にわたり、例えばフォームの入力確認や、ポップアップ広告、特定の操作の注意喚起など、様々なシーンで活用されています。これからのWeb開発で、ぜひこの軽量なモーダル実装を取り入れてみてください。

　
※流用される場合は自己責任でお願いします。
　headタグ内のGoogleアナリティクスタグは流用しないで下さい。

モーダル modal
関連記事