Javascriptでモーダルウィンドウを実装する

モーダルウィンドウ




当記事では、Javascriptでモーダルウィンドウを実装する方法について記します。
ボタンクリックでモーダルウィンドウが開き、背景 or 閉じるボタンのクリックでモーダルウィンドウが閉じるというようなイメージになります。

記事の下の方に実際に動かせるデモも用意しております。





⓪モーダルウィンドウとは

モーダルウィンドウは、Webページ上でコンテンツを表示するためのポピュラーなUIパターンです。モーダルウィンドウは、ユーザーが他のコンテンツとの対話を一時的に中断し、重要な情報やタスクに集中できるようにするために使用されます。

モーダルウィンドウは通常、オーバーレイと呼ばれる透明な背景と、前面に浮かび上がるウィンドウ本体から構成されます。モーダルウィンドウが表示されている間、ユーザーはウィンドウの外側のコンテンツに対して操作できなくなります。このような挙動により、ユーザーの注意をモーダルウィンドウ内の情報やタスクに集中させることができます。

モーダルウィンドウは、様々なシナリオで利用されます。例えば、重要なメッセージの表示、ユーザーに入力を求めるフォームの表示、確認や警告のダイアログの表示などがあります。






①HTML:モーダルウィンドウのトリガーボタンとコンテンツを用意する

モーダルウィンドウのトリガーボタンとコンテンツを用意します。
ここではコンテンツを画像としています。

<button class="modal-btn">モーダルウィンドウを表示</button>
<div class="modal close">
    <div class="content">
        <div class="close-btn close">×</div>
        <img src="img/sample.png">
    </div>
</div>





②CSS:モーダルウィンドウのスタイルを調整する

1~10行目でモーダルウィンドウを最前面で固定し、非表示に、
11~21行目で閉じるボタンを右上に固定し、スタイルを適用、
22~28行目でコンテンツの幅を決め、中央寄せにしています。

.modal{
    display: none;
    position:fixed;
    top: 0;
    left:0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background-color: #1119;
}
.modal .close-btn {
    position: absolute;
    cursor: pointer;
    top: 5px;
    right: 5px;
    border-radius: 50%;
    background-color: #fff;
    font-weight: bold;
    font-size: 20px;
    line-height: 1;
    padding: 3px;
}
.modal .content{
    position: relative;
    width: 40%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.modal .content img{
    width: 100%;
}





③Javascript:モーダルウィンドウの表示と非表示を切り替える

1行目でクリックイベントを登録し、
2~4行目でトリガーボタンをクリックした時にモーダルウィンドウを表示、
5~7行目で背景/閉じるボタンをクリックした時にモーダルウィンドウを非表示にするようにしています。

document.addEventListener('click', function(e){
    if(e.target.classList.contains('modal-btn')){
        e.target.nextElementSibling.style.display='block'
    }
    if(e.target.classList.contains('close')){
        e.target.closest('.modal').style.display='none'
    }
})




デモ

実際に動きを確認できるデモを用意しました。
ボタンをクリックするとモーダルウィンドウが開き、背景/閉じるボタンをクリックすると閉じると思います。

下記のように複数置いても問題なく動きます。





ソースコード全文

最後にソースコードを全文載せておきます。

<style>
    .modal{
        display: none;
        position:fixed;
        top: 0;
        left:0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        background-color: #1119;
    }
    .modal .close-btn {
        position: absolute;
        cursor: pointer;
        top: 5px;
        right: 5px;
        border-radius: 50%;
        background-color: #fff;
        font-weight: bold;
        font-size: 20px;
        line-height: 1;
        padding: 3px;
    }
    .modal .content{
        position: relative;
        width: 40%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .modal .content img{
        width: 100%;
    }
</style>



<button class="modal-btn">モーダルウィンドウを表示</button>
<div class="modal close">
    <div class="content">
        <div class="close-btn close">×</div>
        <img src="img/sample.png">
    </div>
</div>

<button class="modal-btn">モーダルウィンドウを表示</button>
<div class="modal close">
    <div class="content">
        <div class="close-btn close">×</div>
        <img src="img/sample2.png">
    </div>
</div>


<script>
    document.addEventListener('click', function(e){
        if(e.target.classList.contains('modal-btn')){
            e.target.nextElementSibling.style.display='block'
        }
        if(e.target.classList.contains('close')){
            e.target.closest('.modal').style.display='none'
        }
    })
</script>








以上、Javascriptでモーダルウィンドウを実装する方法でした。

スポンサーリンク

You can subscribe by SNS

スポンサーリンク