JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptとCSSでモーダルポップアップを作成する方法

モーダルポップアップの作成とは、ボタンをクリックしたときに表示され、ユーザーがポップアップの外側をクリックすると自動的に閉じるダイアログボックスをWebページに追加することを指します。

モーダルポップアップの基本構成

一般的なモーダルポップアップは、以下のようにヘッダーと本文（テキスト）で構成されています。用途に応じてフッターを追加することも可能です。

JavaScriptとCSSでモーダルポップアップを作成する方法

CSSとJavaScriptによる実装コード

CSSとJavaScriptを使ってモーダルポップアップを作成するには、次のコードをそのままHTMLファイルに貼り付けてブラウザで開いてみてください。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         .popup {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #F1F1F1;
            background-color: rgba(0,0,0,0.4);
            -webkit-animation-name: fadeIn;
            -webkit-animation-duration: 0.4s;
            animation-name: fadeIn;
            animation-duration: 0.4s
         }
         .popup-content {
            position: fixed;
            bottom: 0;
            background-color: #ffffff;
            width: 100%;
            -webkit-animation-name: slideIn;
            -webkit-animation-duration: 0.5s;
            animation-name: slideIn;
            animation-duration: 0.5s
         }
         .end {
            color: white;
            float: right;
            font-size: 15px;
            font-weight: bold;
         }
         .end:hover,
         .end:focus {
            color: #000;
            text-decoration: underline;
            cursor: pointer;
         }
         .popup-header {
            padding: 1px 10px;
            background-color: #8AC1E0;
            color: white;
         }
         .popup-body {padding: 1px 5px;}
         @-webkit-keyframes slideIn {
            from {bottom: -300px; opacity: 0}
            to {bottom: 0; opacity: 1}
         }
         @keyframes slideIn {
            from {bottom: -300px; opacity: 0}
            to {bottom: 0; opacity: 1}
         }
         @-webkit-keyframes fadeIn {
            from {opacity: 0}
            to {opacity: 1}
         }
         @keyframes fadeIn {
            from {opacity: 0}
            to {opacity: 1}
         }
      </style>
   </head>
   <body>
      <h2>Heading</h2>
      <button id="btn">Click for Popup</button>
      <div id="myModal" class="popup">
         <!-- Modal content -->
         <div class="popup-content">
            <div class="popup-header">
               <span class="end">×</span>
               <h2>Header</h2>
            </div>
            <div class="popup-body">
               <p>Demo Text</p>
            </div>
         </div>
      </div>
      <script>
         var popup = document.getElementById('myModal');
         var myBytton = document.getElementById("btn");
         var span = document.getElementsByClassName("end")[0];
         myBytton.onclick = function() {
            popup.style.display = "block";
         }
         span.onclick = function() {
            popup.style.display = "none";
         }
         window.onclick = function(event) {
            if (event.target == popup) {
               popup.style.display = "none";
            }
         }
      </script>
   </body>
</html>

コードのポイント解説

  • .popupクラス：画面全体を覆う半透明のオーバーレイ（背景）をposition: fixedで固定表示します。z-indexを指定することで、ページの他のコンテンツより手前に配置されます。
  • .popup-contentクラス：ダイアログ本体です。slideInアニメーションにより、下からスライドしながら表示される動きを実現しています。
  • fadeInアニメーション：オーバーレイの透明度を徐々に変化させ、自然なフェードイン表示を行います。
  • JavaScriptの処理：ボタンクリックでdisplayを「block」にしてポップアップを表示します。×ボタン（.endクラス）のクリック、またはポップアップ外側の領域クリックで「none」に切り替えて非表示にします。

この仕組みを理解すれば、表示位置やアニメーション、デザインを自由にカスタマイズしたオリジナルのモーダルウィンドウを作成できるようになります。

  1. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini

  2. CSSとJavaScriptでポップアップチャットウィンドウを作成する方法

    CSSとJavaScriptを組み合わせることで、Webサイトの右下から表示されるポップアップ型のチャットウィンドウを簡単に実装できます。本記事では、チャットボタンをクリックするとウィンドウが開き、「閉じる」ボタンで閉じられる仕組みを、実際のコード例とともにわかりやすく解説します。 実装例（完全なコード） 以下のコードでは、画面右下に固定配置された「Chat」ボタンを用意し、クリックするとチャットフォームがポップアップで表示される構造になっています。 <!DOCTYPE html> <html> <head> <meta name="view