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