基本的なモーダルウィンドウの作成

モーダルウィンドウは、画面上にオーバーレイを表示して、ユーザーに注意を引きたい内容を提供するために使われます。まずは、基本的なモーダルウィンドウを作成する方法を見てみましょう。

以下は、シンプルなモーダルウィンドウのHTMLコード例です。

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

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">×</span>
        <p>これは基本的なモーダルウィンドウです。</p>
    </div>
</div>

<script>
    var modal = document.getElementById("myModal");
    var btn = document.getElementById("openModal");
    var span = document.getElementsByClassName("close")[0];

    btn.onclick = function() {
        modal.style.display = "block";
    }

    span.onclick = function() {
        modal.style.display = "none";
    }

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>
        

この例では、ボタンをクリックするとモーダルウィンドウが表示され、ウィンドウの×ボタンをクリックするか、モーダルウィンドウの外をクリックすると閉じます。

閉じるボタンを含むモーダル

モーダルウィンドウに閉じるボタンを追加することで、ユーザーが簡単にモーダルを閉じることができます。以下はその実装例です。

<button id="openModal2">閉じるボタンを含むモーダルを開く</button>

<div id="myModal2" class="modal">
    <div class="modal-content">
        <span class="close2">×</span>
        <p>このモーダルには閉じるボタンがあります。</p>
    </div>
</div>

<script>
    var modal2 = document.getElementById("myModal2");
    var btn2 = document.getElementById("openModal2");
    var span2 = document.getElementsByClassName("close2")[0];

    btn2.onclick = function() {
        modal2.style.display = "block";
    }

    span2.onclick = function() {
        modal2.style.display = "none";
    }

    window.onclick = function(event) {
        if (event.target == modal2) {
            modal2.style.display = "none";
        }
    }
</script>
        

このコードでは、モーダルに閉じるボタンを追加し、モーダル内の×ボタンをクリックするとモーダルが閉じるようにしています。

アニメーション付きモーダル

モーダルウィンドウにアニメーションを追加すると、ユーザー体験が向上します。以下は、フェードイン・フェードアウトのアニメーションを使用したモーダルの例です。

<button id="openModal3">アニメーション付きモーダルを開く</button>

<div id="myModal3" class="modal">
    <div class="modal-content">
        <span class="close3">×</span>
        <p>アニメーション付きのモーダルです。</p>
    </div>
</div>

<style>
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.4);
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .modal-content {
        background-color: #fff;
        margin: 5% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }

    .modal.show {
        display: block;
        opacity: 1;
    }
</style>

<script>
    var modal3 = document.getElementById("myModal3");
    var btn3 = document.getElementById("openModal3");
    var span3 = document.getElementsByClassName("close3")[0];

    btn3.onclick = function() {
        modal3.classList.add("show");
    }

    span3.onclick = function() {
        modal3.classList.remove("show");
    }

    window.onclick = function(event) {
        if (event.target == modal3) {
            modal3.classList.remove("show");
        }
    }
</script>
        

このコードでは、モーダルが表示される際にフェードインし、閉じる際にはフェードアウトします。モーダルに対してclassを追加・削除することでアニメーションを制御しています。

フォームを含むモーダル

モーダルウィンドウ内にフォームを含めることもできます。以下は、モーダル内に簡単な入力フォームを追加した例です。

<button id="openModal4">フォーム付きモーダルを開く</button>

<div id="myModal4" class="modal">
    <div class="modal-content">
        <span class="close4">×</span>
        <h2>お問い合わせフォーム</h2>
        <form>
            <label for="name">名前</label>
            <input type="text" id="name" name="name"><br>
            <label for="email">メール</label>
            <input type="email" id="email" name="email"><br>
            <input type="submit" value="送信">
        </form>
    </div>
</div>

<script>
    var modal4 = document.getElementById("myModal4");
    var btn4 = document.getElementById("openModal4");
    var span4 = document.getElementsByClassName("close4")[0];

    btn4.onclick = function() {
        modal4.style.display = "block";
    }

    span4.onclick = function() {
        modal4.style.display = "none";
    }

    window.onclick = function(event) {
        if (event.target == modal4) {
            modal4.style.display = "none";
        }
    }
</script>
        

このモーダルには、名前とメールアドレスを入力するフォームが含まれています。フォームの内容を送信するためのボタンも追加されています。