Javascriptでモーダルを作成

概要

モーダルは見えていないだけで最初からブラウザ内に存在している。
HTML、CSS、JavaScriptで実装できる。

• HTMLがモーダルの中身
• CSSでデザイン、アニメーション、モーダルが表示されている状態、非表示にされている状態を管理。
• JavaScriptで実際に表示・非表示を切り替える。

動きの流れ

「モーダルを開く」ボタンを押下
↓
モーダルが出てくる
↓
モーダル内の「モーダルを閉じる」ボタンを押す
↓
モーダルが消える

以上の流れを実現する。

コード全体

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viwport" content="width=device-width, initial-scale=1.0">
    <title>モーダル練習</title>
    <link rel="stylesheet" href="modal.css">
</head>
<body>
    <h1>JavaScriptモーダル作成練習</h1>

    <button id="openModalBtn">モーダルを開く</button>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>これはモーダルのタイトルです</h2>
            <p>ここにモーダルの内容が入ります。</p>
            <p>練習のために、好きなコンテンツを追加してみましょう。</p>
            <button id="closeModalBtn">モーダルを閉じる</button>
        </div>
    </div>

    <script src="modal.js"></script>
</body>
</html>

CSS

.modal {
    display: none; /* 初期状態では非表示 */
    position: fixed; /* 画面に固定 */
    z-index: 1; /* 他の要素より手前に表示 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* 内容が多い場合にスクロール可能にする */
    background-color: rgba(0, 0, 0, 0.7); /* 背景を暗くする */
    justify-content: center; /* 中央寄せ用 */
    align-items: center; /* 中央寄せ用 */
}

.modal-content {
    background-color: #fefefe;
    margin: auto; 
    padding: 30px;
    border: 1px solid #888;
    width: 80%; /* 幅の調整 */
    max-width: 500px; /* 最大幅 */
    border-radius: 8px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

JavaScript

const open = document.getElementById('openModalBtn');
const myModal = document.getElementById('myModal');
const close = document.getElementById('closeModalBtn');

open.addEventListener('click', function(){
    myModal.style.display = 'block';
});

close.addEventListener('click',function(){
    myModal.style.display = 'none';
});

JavaScript

const open = document.getElementById('openModalBtn');
const myModal = document.getElementById('myModal');
const close = document.getElementById('closeModalBtn');

• openModalBtn
  クリックするとモーダルが開く。

• myModal
  モーダルの中身

• closeModalBtn
  クリックするとモーダルが閉じる

HTMLにてid属性を付与、JavaScriptのgetElementByIdでHTMLのid属性を取得、それぞれopen、myModal、close定数として定義している。

open.addEventListener('click', function(){
    myModal.style.display = 'block';
});

openの要素がクリックされた時のイベントを設定。
myModal.style.displayは、myModalの要素に対してCSSのdisplay = 'block'を適用している。

CSSファイルがなくてもこれだけで要素の出し入れ機能は完成する。

CSS

モーダルで出し入れしたい要素にdisplay: none;を設定しておく。これを設定しておくと初期状態で要素が非表示になる。

上記のHTML、JavaScript、そしてdisplay: none;コードがあれば、表示・非表示の切り替えは実装できる。

アニメーションをつける場合、例えばCSSの.modal-content に

animation: fadeIn 0.3s ease-out; 

を追加、そして新しく

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

を追記すると、0.3秒かけてモーダルが20px分降りてくるように編集することができる。（ふわっと降りてくるようになる）