swiper.jsで作成したスライド内で、モーダルウィンドウを表示したい

swiper.jsを利用して、スライダーを作成しています。
各スライダー内に、以下のjqueryを用いてモーダルウィンドウを設置しようとしたのですが、うまく表示されませんでした。

【モーダルウィンドウ作成時に参考にさせて頂いたサイト】
http://coolwebwindow.com/jquery-lab/archives/304

<script>
$(function(){
    // 「.modal-open」をクリック
    $('.modal-open').click(function(){
        // オーバーレイ用の要素を追加
        $('body').append('<div class="modal-overlay"></div>');
        // オーバーレイをフェードイン
        $('.modal-overlay').fadeIn('slow');

        // モーダルコンテンツのIDを取得
        var modal = '#' + $(this).attr('data-target');
        // モーダルコンテンツの表示位置を設定
        modalResize();
         // モーダルコンテンツフェードイン
        $(modal).fadeIn('slow');

        // 「.modal-overlay」あるいは「.modal-close」をクリック
        $('.modal-overlay, .modal-close').off().click(function(){
            // モーダルコンテンツとオーバーレイをフェードアウト
            $(modal).fadeOut('slow');
            $('.modal-overlay').fadeOut('slow',function(){
                // オーバーレイを削除
                $('.modal-overlay').remove();
            });
        });

        // リサイズしたら表示位置を再取得
        $(window).on('resize', function(){
            modalResize();
        });

        // モーダルコンテンツの表示位置を設定する関数
        function modalResize(){
            // ウィンドウの横幅、高さを取得
            var w = $(window).width();
            var h = $(window).height();

            // モーダルコンテンツの表示位置を取得
            var x = (w - $(modal).outerWidth(true)) / 2;
            var y = (h - $(modal).outerHeight(true)) / 2;

            // モーダルコンテンツの表示位置を設定
            $(modal).css({'left': x + 'px','top': y + 'px'});
        }

    });
});
</script>

スライダーの外に出すと、モーダルは問題なく表示されます。
スライダー内にモーダルを設置するにはどうすればいいのでしょうか…。

jqueryをほぼ理解しないまま、コピペだけで対応している初心者です。
どなたかご教授頂けますと幸いです。
宜しくお願い致します。

回答1件

ベストアンサー

スライダー内にモーダルというのがどういう状態なのかわかりませんでした。
Swiperによるコンテンツ内からモーダルウインドウを呼び出すのは問題なくできました。

最近の質問にこのようなものがありましたが参考になるでしょうか？
https://teratail.com/questions/80732

投稿2017/06/26 01:49

x_x

総合スコア13733

回答へのコメント

isobel

2017/06/26 03:12

質問がわかりにくくて申し訳ありません。 http://calendar-life.site/ 上記のようなサイトで、各月のカレンダーの下にある「PRINT OUT」「DOWNLOAD」ボタンをクリックすると、モーダルウィンドウが開くようにしたいのです。記載したjqueryは、スライダーコンテンツ外では動作するものの、スライダー内にある「PRINT OUT」「DOWNLOAD」ボタンをクリックした際モーダルを表示させようとするとうまくいきませんでした。 jqueryが干渉しているのかとは思うのですが…。