Multiple SVG modal window

Question

I'm using an awesome SVG modal window from CodyHouse (SVG modal window tutorial and demo), I been able to add it without problem but I can't add more than one without having a conflict, I tried modifying the ID from the HTML but keeps not working, does anybody knows or can point me out how to add more than one please?

It uses Snap.svg.

HTML - Link

<a href="#0" class="cd-btn" id="modal-trigger" data-type="cd-modal-trigger">Open SVG modal window</a>

HTML - Modal information

<div class="cd-modal" data-modal="modal-trigger">
        <div class="cd-svg-bg" data-step1="M-59.9,540.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L864.8-41c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L-59.5,540.6 C-59.6,540.7-59.8,540.7-59.9,540.5z" data-step2="M33.8,690l-188.2-300.3c-0.1-0.1,0-0.3,0.1-0.3l925.4-579.8c0.1-0.1,0.3,0,0.3,0.1L959.6,110c0.1,0.1,0,0.3-0.1,0.3 L34.1,690.1C34,690.2,33.9,690.1,33.8,690z" data-step3="M-465.1,287.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L459.5-294c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-464.9,287.7-465,287.7-465.1,287.5z" data-step4="M-329.3,504.3l-272.5-435c-0.1-0.1,0-0.3,0.1-0.3l925.4-579.8c0.1-0.1,0.3,0,0.3,0.1l272.5,435c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-329,504.5-329.2,504.5-329.3,504.3z" data-step5="M341.1,797.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L1265.8,216c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L341.5,797.6 C341.4,797.7,341.2,797.7,341.1,797.5z" data-step6="M476.4,1013.4L205,580.3c-0.1-0.1,0-0.3,0.1-0.3L1130.5,0.2c0.1-0.1,0.3,0,0.3,0.1l271.4,433.1c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C476.6,1013.6,476.5,1013.5,476.4,1013.4z">
            <svg height="100%" width="100%" preserveAspectRatio="none" viewBox="0 0 800 500">
                <title>SVG modal background</title>
                <path id="cd-changing-path-1" d="M-59.9,540.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L864.8-41c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L-59.5,540.6 C-59.6,540.7-59.8,540.7-59.9,540.5z"/>
                <path id="cd-changing-path-2" d="M-465.1,287.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L459.5-294c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-464.9,287.7-465,287.7-465.1,287.5z"/>
                <path id="cd-changing-path-3" d="M341.1,797.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L1265.8,216c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L341.5,797.6 C341.4,797.7,341.2,797.7,341.1,797.5z"/>
            </svg>
        </div>
        <div class="cd-modal-content">
            <!-- modal content here -->
            <p>Modal information</p>
        </div>
        <a href="#0" class="modal-close">Close</a>
    </div>
    <div class="cd-cover-layer"></div>

JavaScript

var modalTriggerBts = $('a[data-type="cd-modal-trigger"]'),
    coverLayer = $('.cd-cover-layer');

/*
    convert a cubic bezier value to a custom mina easing
    http://stackoverflow.com/questions/25265197/how-to-convert-a-cubic-bezier-value-to-a-custom-mina-easing-snap-svg
*/
var duration = 600,
    epsilon = (1000 / 60 / duration) / 4,
    firstCustomMinaAnimation = bezier(.63,.35,.48,.92, epsilon);

modalTriggerBts.each(function(){
    initModal($(this));
});

function initModal(modalTrigger) {
    var modalTriggerId =  modalTrigger.attr('id'),
        modal = $('.cd-modal[data-modal="'+ modalTriggerId +'"]'),
        svgCoverLayer = modal.children('.cd-svg-bg'),
        paths = svgCoverLayer.find('path'),
        pathsArray = [];
    //store Snap objects
    pathsArray[0] = Snap('#'+paths.eq(0).attr('id')),
    pathsArray[1] = Snap('#'+paths.eq(1).attr('id')),
    pathsArray[2] = Snap('#'+paths.eq(2).attr('id'));

    //store path 'd' attribute values   
    var pathSteps = [];
    pathSteps[0] = svgCoverLayer.data('step1');
    pathSteps[1] = svgCoverLayer.data('step2');
    pathSteps[2] = svgCoverLayer.data('step3');
    pathSteps[3] = svgCoverLayer.data('step4');
    pathSteps[4] = svgCoverLayer.data('step5');
    pathSteps[5] = svgCoverLayer.data('step6');

    //open modal window
    modalTrigger.on('click', function(event){
        event.preventDefault();

        $('body').addClass('inside-our-work');

        modal.addClass('modal-is-visible');
        coverLayer.addClass('modal-is-visible');
        animateModal(pathsArray, pathSteps, duration, 'open');
    });

    //close modal window
    modal.on('click', '.modal-close', function(event){
        event.preventDefault();

        $('body').removeClass('inside-our-work');

        modal.removeClass('modal-is-visible');
        coverLayer.removeClass('modal-is-visible');
        animateModal(pathsArray, pathSteps, duration, 'close');
    });
}

function animateModal(paths, pathSteps, duration, animationType) {
    var path1 = ( animationType == 'open' ) ? pathSteps[1] : pathSteps[0],
        path2 = ( animationType == 'open' ) ? pathSteps[3] : pathSteps[2],
        path3 = ( animationType == 'open' ) ? pathSteps[5] : pathSteps[4];
    paths[0].animate({'d': path1}, duration, firstCustomMinaAnimation);
    paths[1].animate({'d': path2}, duration, firstCustomMinaAnimation);
    paths[2].animate({'d': path3}, duration, firstCustomMinaAnimation);
}

function bezier(x1, y1, x2, y2, epsilon){
    //https://github.com/arian/cubic-bezier
    var curveX = function(t){
        var v = 1 - t;
        return 3 * v * v * t * x1 + 3 * v * t * t * x2 + t * t * t;
    };

    var curveY = function(t){
        var v = 1 - t;
        return 3 * v * v * t * y1 + 3 * v * t * t * y2 + t * t * t;
    };

    var derivativeCurveX = function(t){
        var v = 1 - t;
        return 3 * (2 * (t - 1) * t + v * v) * x1 + 3 * (- t * t * t + 2 * v * t) * x2;
    };

    return function(t){

        var x = t, t0, t1, t2, x2, d2, i;

        // First try a few iterations of Newton's method -- normally very fast.
        for (t2 = x, i = 0; i < 8; i++){
            x2 = curveX(t2) - x;
            if (Math.abs(x2) < epsilon) return curveY(t2);
            d2 = derivativeCurveX(t2);
            if (Math.abs(d2) < 1e-6) break;
            t2 = t2 - x2 / d2;
        }

        t0 = 0, t1 = 1, t2 = x;

        if (t2 < t0) return curveY(t0);
        if (t2 > t1) return curveY(t1);

        // Fallback to the bisection method for reliability.
        while (t0 < t1){
            x2 = curveX(t2);
            if (Math.abs(x2 - x) < epsilon) return curveY(t2);
            if (x > x2) t0 = t2;
            else t1 = t2;
            t2 = (t1 - t0) * .5 + t0;
        }

        // Failure
        return curveY(t2);

    };
};

Thanks!

@DannyFardyJhonstonBermúdez No problem, I added the code. Thanks! — arbustobce, Sep 24 '15 at 22:57
The DEMO is crashing, when clicking on that button more times... http://codyhouse.co/demo/svg-modal-window/index.html — Legionar, Sep 29 '15 at 14:53

score 1 · Answer 1 · answered Sep 29 '15 at 14:51

I will reply to my own question in case someone else is looking how to do this and can't like me. We need to modify basically three things:

The ID of the link
The 'data-modal' with the same name as the ID of the link
The ID of the SVG paths (this is necessary because if not they'll conflict and although everything will work fine the animation is not going to be applied at all

Credits for this goes to: '@Claudia Romano' and '@Mauritius D'Silva', thanks so much for the help in the blog!

Hope it helps!

Multiple SVG modal window

1 Answers1