javascript - 多个 SVG 模态窗口

Question

我正在使用来自 CodyHouse 的一个很棒的 SVG 模态窗口 ( SVG modal window tutorial and demo )，我能够毫无问题地添加它，但我无法添加多个而不发生冲突，我尝试从 HTML 修改 ID但一直不起作用，有人知道或可以指出我如何添加多个吗？

它使用 Snap.svg .

HTML - 链接

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

HTML - 模态信息

<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);

    };
};

谢谢!

Answer 1

如果其他人正在寻找如何做到这一点并且不喜欢我，我会回答我自己的问题。 我们基本上需要修改三件事:

• 链接的 ID
• 与链接 ID 同名的“数据模式”
• SVG 路径的 ID(这是必要的，因为如果没有，它们会发生冲突，虽然一切都会正常工作，但动画根本不会应用

感谢:“@Claudia Romano”和“@Mauritius D'Silva”，非常感谢博客中的帮助!

希望对你有帮助!