モーダルウィンドウの中で "だけ" jQueryが読み込まれない。(slickのスライダー)

モーダルウィンドウ（ポップアップ）の中でだけ jQueryで書いたslickのスライダーが表示されません。
モーダルウィンドウの中でなければ表示されます。
しかし、モーダルウィンドウの中でも画面幅を変更すると現れます。

実際のページを見ていただければ幸いです。（スマホ幅で見てください。PCはまだCSSを書いていません。）
実際のページリンク

↓↓↓モーダルの中でなければslickで作ったスライダーが表示されている。↓↓↓

↓↓↓しかし、ポップアップの中では表示されない。↓↓↓

ポップアップボタンを押す↓

ポップアップした画面↓

↓↓↓だが、ポップアップを開いた状態で、PCであれば画面幅を少しでも変更したり、スマホであればスマホ本体を横にして縦に戻して少しでも画面幅を変更するとスライダーが現れる。↓↓↓

これはどういった現象でしょうか？
ご教授いただければ幸いです。

html
1<section class="bg-nagoyameshi18">
2    <div class="topsection bg topsection_nagoyameshi">
3        <h2><span class="f08">名古屋ご当地グルメ</span><br>なごやめし全18種</h2>
4        <a href="#" class="top_button">詳しくはこちら</a>
5    </div>
6    <div class="content_div nagoyameshi18_content">
7        <div class="common_allnagoyameshi">
8            <div class="common_allnagoyameshi_box">
9                <div class="allnagoyameshi_img">
10                    <img src="https://shachime.com/wp-content/uploads/2020/12/hitsumabushi_sld.jpg" alt="ひつまぶし">
11                </div>
12                <div class="allnagoyameshi_name">
13                    <h3>ひつまぶしひつまぶしひつま</h3>
14                    <div class="allnagoyameshi_name_modal">
15                        <a href="#" class="js-modal-open" data-target="hitsumabushi_detail"><p>どんな料理？</p></a>
16                    </div>
17                </div>
18                <div class="allnagoyameshi_restaurant">
19                    <p>厳選３店おすすめ名店はこちら</p>
20                </div>
21            </div>
22            <div class="common_allnagoyameshi_box">
23                <div class="allnagoyameshi_img">
24                    <img src="https://shachime.com/wp-content/uploads/2020/12/hitsumabushi_sld.jpg" alt="ひつまぶし">
25                </div>
26                <div class="allnagoyameshi_name">
27                    <h3>ひつまぶしひつまぶしひつま</h3>
28                    <div class="allnagoyameshi_name_modal">
29                        <a href="#" class="js-modal-open" data-target="hitsumabushi_detail2"><p>どんな料理？</p></a>
30                    </div>
31                </div>
32                <div class="allnagoyameshi_restaurant">
33                    <p>厳選３店おすすめ名店はこちら</p>
34                </div>
35            </div>
36            <div class="common_allnagoyameshi_box">
37                <div class="allnagoyameshi_img">
38                    <img src="https://shachime.com/wp-content/uploads/2020/12/hitsumabushi_sld.jpg" alt="ひつまぶし">
39                </div>
40                <div class="allnagoyameshi_name">
41                    <h3>ひつまぶしひつまぶしひつま</h3>
42                    <div class="allnagoyameshi_name_modal">
43                        <p>どんな料理？</p>
44                    </div>
45                </div>
46                <div class="allnagoyameshi_restaurant">
47                    <p>厳選３店おすすめ名店はこちら</p>
48                </div>
49            </div>
50        </div>
51        <div class="nagoyameshi18_banner bg">
52            <h3><span class="f07">厳選３店舗</span><br>なごやめしの名店</h3>
53            <a href="#" class="top_button">詳しくはこちら</a>
54        </div>
55    </div>
56</section>
57
58<!--ここから【どんな料理？】のポップアップコンテンツ（slickで作っています。）-->
59<div id="hitsumabushi_detail" class="modal js-modal">
60    <div class="modal-bg js-modal-close">
61    </div>
62    <div class="modal-content">
63        <div class="slider container">
64            <div class="slider-for">
65                <div class="sp-slide"><img src="https://shachime.com/wp-content/uploads/2020/11/Hitsumabushi.jpg" alt=""></div>
66                <div class="sp-slide"><img src="https://shachime.com/wp-content/uploads/2020/11/Hitsumabushi2.jpg" alt=""></div>
67                <div class="sp-slide"><img src="https://shachime.com/wp-content/uploads/2020/11/Hitsumabushi3.jpg" alt=""></div>
68                <div class="sp-slide"><img src="https://shachime.com/wp-content/uploads/2020/11/Hitsumabushi4.jpg" alt=""></div>
69                <div class="sp-slide"><img src="https://shachime.com/wp-content/uploads/2020/11/Hitsumabushi2.jpg" alt=""></div>
70                <div class="sp-slide"><img src="https://shachime.com/wp-content/uploads/2020/11/Hitsumabushi3.jpg" alt=""></div>
71            </div>     
72            <div class="slider-nav-wrap">
73                <div class="slider-nav">
74                    <div class="sp-thumbnail"><img src="https://shachime.com/wp-content/uploads/2020/11/Hitsumabushi.jpg" alt=""></div>
75                    <div class="sp-thumbnail"><img src="https://shachime.com/wp-content/uploads/2020/11/Hitsumabushi2.jpg" alt=""></div>
76                    <div class="sp-thumbnail"><img src="https://shachime.com/wp-content/uploads/2020/11/Hitsumabushi3.jpg" alt=""></div>
77                    <div class="sp-thumbnail"><img src="https://shachime.com/wp-content/uploads/2020/11/Hitsumabushi4.jpg" alt=""></div>
78                    <div class="sp-thumbnail"><img src="https://shachime.com/wp-content/uploads/2020/11/Hitsumabushi2.jpg" alt=""></div>
79                    <div class="sp-thumbnail"><img src="https://shachime.com/wp-content/uploads/2020/11/Hitsumabushi3.jpg" alt=""></div>
80                </div>
81            </div>
82        </div>
83        <a href="#" class="js-modal-close">閉じる</a>
84    </div>
85</div>
86<!--ここまで【どんな料理？】のポップアップコンテンツ（slickで作っています。）-->

モーダルを作っているCSS

css
1/* これが無いとモーダルウィンドウ表示の際に余白が出る*/
2*{
3  margin: 0;
4  padding: 0;
5}
6/* モーダル全体(背景＋本体) */
7.modal{
8  display: none;
9  position: fixed;
10  top: 0;
11  height: 100vh;
12  width: 100%;
13  z-index: 999999;
14}
15/* モーダル背景 */
16.modal-bg{
17  position: absolute;
18  height: 100vh;
19  width: 100%;
20  background: rgba(0, 0, 0, 0.8);
21}
22/* モーダル本体 */
23.modal-content{
24  position: absolute;
25  left: 0%;
26  right: 0%;
27  top: 10%;
28  overflow: scroll; /* はみ出た部分はスクロールさせる */
29  height: 70%;/* これが無いと「overflow:scroll」が利かない */
30  width: 90%;/* これが無いと「overflow:scroll」が利かない */
31  background: white;
32  padding: 0px;
33  margin: auto;
34}
35/* モーダルウィンドウ表示中に記事本体を固定 */
36body.fixed {
37  position: fixed;
38  width: 100%;
39  height: 100%;
40  left: 0;
41}

header.phpの<?php wp_head(); ?>の下に以下を記述

php
1	<!--jQueryプラグインslack用のcssパス（footer.phpにもjsのパス記述あり）-->
2	<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/slick/slick.css" media="screen" />
3<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/slick/slick-theme.css" media="screen" />

footer.phpの<?php wp_footer(); ?>の下に以下を記述

php
1<?php wp_footer(); ?>
2
3<!--jQueryプラグインslack用のjsパス（header.phpにもcssのパス記述あり）-->
4<script src="<?php echo get_stylesheet_directory_uri(); ?>/slick/slick.min.js"></script>
5
6	<!--jQueryプラグインslackサムネイル付きスライダー（どんな料理？の料理写真スライダー用）-->
7<script type="text/javascript">
8jQuery(function($){
9$(document).ready(function(){
10    $('.slider-for').slick({
11        slidesToShow: 1,
12        slidesToScroll: 1,
13        arrows: false,
14        fade: false,
15        asNavFor: '.slider-nav'
16    });
17    $('.slider-nav').slick({
18        slidesToShow: 6,
19        slidesToScroll: 1,
20        asNavFor: '.slider-for',
21        dots: false,
22        centerMode: true,
23        focusOnSelect: true,
24        vertical: true,
25        arrows:  true,
26        prevArrow: $('.slick-prev'),
27        nextArrow: $('.slick-next'), 
28        responsive: [
29            {
30                breakpoint: 768,
31                settings: {
32                    centerMode: true,
33                    vertical: false
34                }
35            }
36        ]
37    });
38});
39});
40</script>
41
42
43<!--どんな料理？のポップアップ用jQuery-->
44<script type="text/javascript">
45jQuery(function($){
46// モーダルウィンドウを開く
47$('.js-modal-open').on('click', function(){
48  var target = $(this).data('target');
49  var modal = document.getElementById(target);
50  scrollPosition = $(window).scrollTop();
51
52  $('body').addClass('fixed').css({'top': -scrollPosition});
53  $(modal).fadeIn();
54  return false;
55});
56// モーダルウィンドウを閉じる
57$('.js-modal-close').on('click', function(){
58  $('body').removeClass('fixed');
59  window.scrollTo( 0 , scrollPosition );
60  $('.js-modal').fadeOut();
61  return false;
62});
63});
64</script>

行動規範の内容に同意します

回答1件

ベストアンサー

この質問に同じ

スライダー系のライブラリは非表示状態でinitすると失敗するのが多いです

投稿2021/02/01 04:38

KazuhiroHatano

総合スコア7804

pappapa

2021/02/01 04:42

ご回答ありがとうございます。つまり、文法ミスとかそういった類の問題ではなく、そもそも、モーダルウィンドウの中でスライダー系のライブラリは使用禁止ということでしょうか？（slickを使わずに自分でコードを書いて作らなければならないということでしょうか？）

KazuhiroHatano

2021/02/01 04:54

いいえ、display:noneになっていない状態でslickがinitされればいいだけです要するにslickのinit時に各スライドのheightの値が取得できないのが失敗の原因です modalで表示がされたらwindowのresizeイベントを発火するのでも一応いけるかもしれません

pappapa

2021/02/01 05:23

ご指摘ありがとうございます。対処法はあるのですね。どのように書き換えれば正常に動きそうでしょうか？書き換えコードを教えていただくことは可能でしょうか？すみませんが助けてください。

KazuhiroHatano

2021/02/01 05:41

モーダル開く処理のreturn falseの前に$(window).resize();

pappapa

2021/02/01 05:53

ありがとうございます。ご指摘いただいた点を早速追加してみたら、ちゃんと動作しました！本当にありがとうございます。助かりました。

pappapa

2021/02/03 03:13

https://shachime.com/ja/%e4%bb%ae%e3%83%88%e3%83%83%e3%83%97%e3%83%9a%e3%83%bc%e3%82%b8/ 何度も失礼いたします。上記のページにて実装したのですが、２つ目を追加すると２つ目が、また同じ現象になってしまいました。ページを開く ↓ ひつまぶしの「どんな料理？」を押す（ひつまぶしのモーダルを開く）これはslickが正常に動作する ↓ ひつまぶしのモーダルを閉じる ↓ 味噌かつの「どんな料理？」を押す（味噌かつのモーダルを開く） ※ここでslickが正常に動作しない ※前回同様に、画面幅を少しでも変更したりすると動作する ↓ その後、もう一度、ひつまぶしのモーダルを開くと slickが正常に動作しない。すみませんが解決策を教えていただけますでしょうか？

KazuhiroHatano

2021/02/03 03:19

$(modal).fadeIn().then(function(){$(window).resize();});

pappapa

2021/02/03 03:23

ご対応ありがとうございます。 $(window).resize(); を $(modal).fadeIn().then(function(){$(window).resize();}); に置き換えるパターンと $(window).resize(); の下に $(modal).fadeIn().then(function(){$(window).resize();}); を追加するパターンをやってみましたがうまくいきませんでした。 $(modal).fadeIn().then(function(){$(window).resize();}); の挿入方法が間違っていますか？

KazuhiroHatano

2021/02/03 04:34

$(modal).fadeIn() ↓ $(modal).fadeIn('normal',function(){$(window).resize();});

pappapa

2021/02/03 04:38

ご返信ありがとうございます。以下のようにしましたが、動いてくれません。 <?php wp_footer(); ?>  <script src="<?php echo get_stylesheet_directory_uri(); ?>/slick/slick.min.js"></script>  <script type="text/javascript"> jQuery(function($){ $(document).ready(function(){ $('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.slider-nav' }); $('.slider-nav').slick({ slidesToShow: 5, slidesToScroll: 1, asNavFor: '.slider-for', dots: false, centerMode: true, focusOnSelect: true, }); }); }); </script>  <script type="text/javascript"> jQuery(function($){ // モーダルウィンドウを開く $('.js-modal-open').on('click', function(){ var target = $(this).data('target'); var modal = document.getElementById(target); scrollPosition = $(window).scrollTop(); $('body').addClass('fixed').css({'top': -scrollPosition}); $(modal).fadeIn('normal',function(){$(window).resize();}); $(window).resize(); return false; }); // モーダルウィンドウを閉じる $('.js-modal-close').on('click', function(){ $('body').removeClass('fixed'); window.scrollTo( 0 , scrollPosition ); $('.js-modal').fadeOut(); return false; }); }); </script>

KazuhiroHatano

2021/02/03 04:55

この対応は非表示状態でinitされたslickを表示時にサイズの再計算をさせてるだけなので initに失敗していたり、slickが外れたものには効果ありません $(modal).fadeIn( 'normal', function(){ setTimeout(function(){ $(window).resize(); },1); } ); これでダメならfadeOutでslickが外れてる疑いあり jQeuryのfadeOutを使うのではなく自前でclassを付け替えて可視・不可視を切り替えるような形で作り直し

pappapa

2021/02/03 05:06

以下のようにしてみましたがうまくいきませんでした。また、貼り付け箇所を間違えていたりしていますでしょうか？ <script type="text/javascript"> jQuery(function($){ // モーダルウィンドウを開く $('.js-modal-open').on('click', function(){ var target = $(this).data('target'); var modal = document.getElementById(target); scrollPosition = $(window).scrollTop(); $('body').addClass('fixed').css({'top': -scrollPosition}); $(modal).fadeIn( 'normal', function(){ setTimeout(function(){ $(window).resize(); },1); } ); $(window).resize(); return false; }); // モーダルウィンドウを閉じる $('.js-modal-close').on('click', function(){ $('body').removeClass('fixed'); window.scrollTo( 0 , scrollPosition ); $('.js-modal').fadeOut(); return false; }); }); </script>

KazuhiroHatano

2021/02/03 06:06

これでダメならfadeOutを使わない形で作り直し

pappapa

2021/02/03 06:27

かしこまりました。ご対応ありがとうございました！

pappapa

2021/02/09 06:59

なんとかCSSだけで作りました。解決しました。ありがとうございます。

行動規範の内容に同意します