https://select-ltd.jp/js/func.js

1$(function(){
2   
3  // 「.modal_open」をクリックしたらモーダルと黒い背景を表示する
4  $('.modal_open').click(function(){
5 
6    // 黒い背景をbody内に追加
7    $('body').append('<div class="modal_bg"></div>');
8    $('.modal_bg').fadeIn();
9 
10    // data-targetの内容をIDにしてmodalに代入
11    var modal = '#' + $(this).attr('data-target');
12 
13    // モーダルをウィンドウの中央に配置する
14    function modalResize(){
15        var w = $(window).width();
16        var h = $(window).height();
17 
18        var x = (w - $(modal).outerWidth(true)) / 2;
19        var y = (h - $(modal).outerHeight(true)) / 2;
20 
21        $(modal).css({'left': x + 'px','top': y + 'px'});
22    }
23 
24    // modalResizeを実行
25    modalResize();
26 
27    // modalをフェードインで表示
28    $(modal).fadeIn();
29 
30    // .modal_bgか.modal_closeをクリックしたらモーダルと背景をフェードアウトさせる
31    $('.modal_bg, .modal_close').off().click(function(){
32        $('.modal_box').fadeOut();
33        $('.modal_bg').fadeOut('slow',function(){
34            $('.modal_bg').remove();
35        });
36    });
37 
38    // ウィンドウがリサイズされたらモーダルの位置を再計算する
39    $(window).on('resize', function(){
40        modalResize();
41    });
42 
43    // .modal_switchを押すとモーダルを切り替える
44    $('.modal_switch').click(function(){
45 
46      // 押された.modal_switchの親要素の.modal_boxをフェードアウトさせる
47      $(this).parents('.modal_box').fadeOut();
48 
49      // 押された.modal_switchのdata-targetの内容をIDにしてmodalに代入
50      var modal = '#' + $(this).attr('data-target');
51 
52      // モーダルをウィンドウの中央に配置する
53      function modalResize(){
54          var w = $(window).width();
55          var h = $(window).height();
56 
57          var x = (w - $(modal).outerWidth(true)) / 2;
58          var y = (h - $(modal).outerHeight(true)) / 2;
59 
60          $(modal).css({'left': x + 'px','top': y + 'px'});
61      }
62 
63      // modalResizeを実行
64      modalResize();
65 
66      $(modal).fadeIn();
67 
68      // ウィンドウがリサイズされたらモーダルの位置を再計算する
69      $(window).on('resize', function(){
70          modalResize();
71      });
72    });
73  });
74});