modaal でモーダルウィンドウを表示させた時、flexslider の画像が表示されない

前提・実現したいこと

現在 modaal と flexslider を使用して、モーダルウィンドウ内でスライドショーを表示しようとしておりますが、モーダルウィンドウ表示後に、デバッグモードを使用して画像部分をインスペクターでクリックしないと画像が表示されない状況です。
※ 画像が表示されればスライドショーは動作いたします。
display:none のスタイルが影響していることはわかりましたが、どのように修正すれば良いかお力添えいただけますと幸いです。

発生している問題・エラーメッセージ

モーダルウィンドウ表示後に、デバッグモードを使用して画像部分をインスペクターでクリックしないと画像が表示されない

該当のソースコード

HTML
1
2<a href="#modal" class="modal"><img class="iconBorder" src="images/hoge.jpg" width="200" height="200"></a>
3<!-- プロフィール画像モーダル ここから -->
4  <div id="modal" class="modal" style="display:none;">
5    <div class="modalClose"></div>
6    <div class="flexslider modalSlides">
7      <ul class="slides modalImages">
8        <li><img src="images/test1.jpg"></li>
9        <li><img src="images/test2.jpg"></li>
10        <li><img src="images/test3.jpg"></li>
11        <li><img src="images/test4.jpg"></li>
12      </ul>
13    </div>
14  </div>
15<!-- プロフィール画像モーダル ここまで -->

jQuery
1    $(function(){
2        $('.profileInfo').modaal({
3            width: 800,
4        });
5        $('.modalSlides').flexslider({
6          animation: "slide",
7          slideshow:false,
8        });
9    });

試したこと

display:none を無効化したところ、正常に動作いたしましたが、モーダルウィンドウ部分が隠れないため、実用はできません。。

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

回答2件

ベストアンサー

こんにちは。

どうやら、リサイズなどがかかるとリフレッシュしているようなので、イベント拾うのはどうでしょうか。

サンプル

js
1        $('.modal').modaal({
2            width: 800,
3            after_open: ()=>$('.modalSlides').resize()
4        });

投稿2020/12/03 05:33

Lhankor_Mhy

総合スコア36104

jQuery前提ならjquery-modalで処理すると楽です

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

投稿2020/12/02 03:50