モーダルウインドウの実装方法

HTML、CSS部分の作成

まずは、モーダルウィンドウを開くためのボタン、モーダルウィンドウ本体、オーバーレイ部分のパーツをそれぞれ作成していきます。

<body>
    <div class="modal_open_btn">開く</div>
    <div class="modal_window">
        <p>モーダルウィンドウの中身です</p>
        <span class="modal_close">×</span>
    </div>
    <div class="modal_overlay"></div>
</body>

js部分の作成

ここからはjs部分の作成になります。
こちらはjQueryを利用しているのであらかじめjQueryを読み込んでることを確認してください。

js部分1

モーダルウィンドウの表示と、bodyに対してoverflow:hiddenをかける事でモーダルウィンドウを開いている際に、スクロール出来ないように指定します。

$('.modal_open_btn').click(function () {
      $('body').addClass('scroll_lock'); 
        $('.modal_overlay').fadeIn();
        $('.modal_window').fadeIn();        
});

js部分2

閉じるボタン、オーバーレイ部分をクリックした際に、モーダルウィンドウの非表示と、先ほど指定したスクロールの固定を解除します。

$('.modal_close , .modal_overlay').click(function () {
      $('body').removeClass('scroll_lock'); 
      $('.modal_overlay').fadeOut();
      $('.modal_window').fadeOut();
});

js部分3

ESCキーを押した時に、閉じるボタンを押した時と同様の動作をするように指定しています。

window.onkeyup = function(event){
    if(event.keyCode == '27'){
        $('body').removeClass('scroll_lock'); 
        $('.modal_overlay').fadeOut();
        $('.modal_window').fadeOut();
    }
}
わぷまる
「keyCode == '27'」の部分で、ESCキーを指定しているので、ここの数字を変更する事で他のキーを指定することも出来るよ

全部まとめたのがこちら

$(function () {
    $('.modal_open_btn').click(function () {
        $('body').addClass('scroll_lock'); 
        $('.modal_overlay').fadeIn();
        $('.modal_window').fadeIn(); 
        
    });
    $('.modal_close , .modal_overlay').click(function () {
        $('body').removeClass('scroll_lock'); 
        $('.modal_overlay').fadeOut();
        $('.modal_window').fadeOut();
    });
    window.onkeyup = function(event){
        if(event.keyCode == '27'){
            $('body').removeClass('scroll_lock'); 
            $('.modal_overlay').fadeOut();
            $('.modal_window').fadeOut();
        }
    }
});

WordPressで上手く動かない場合、「$」を全部「jQuery」に置換する事で正常に動作する場合があります。

コメントを残す
コメントを残す

  1. アバター Nikesig より:

    deep web search dark internet deep web drug markets

  2. アバター Charleslix より:

    Запой может быть вызван различными факторами, включая стресс, депрессию, психические расстройства, социальные и семейные проблемы, а также физиологическую зависимость от алкоголя. Последствия запоя могут быть крайне серьезными, начиная от проблем со здоровьем (таких как цирроз печени, панкреатит, сердечно-сосудистые заболевания) и заканчивая социальными и личными проблемами (разрушение семей, потеря работы, правонарушения).
    https://tajno-vyvod-iz-zapoya.ru/