Fatal编程技术网

Javascript 多模式窗口

javascript jquery svg

Javascript 多模式窗口,javascript,jquery,svg,snap.svg,modal-window,Javascript,Jquery,Svg,Snap.svg,Modal Window,我正在使用CodyHouse（）提供的一个很棒的SVG模式窗口，我可以毫无问题地添加它，但我无法添加多个窗口而不发生冲突，我尝试从HTML中修改ID，但一直不起作用，有人知道或者可以告诉我如何添加多个窗口吗 它使用 HTML-链接 <a href="#0" class="cd-btn" id="modal-trigger" data-type="cd-modal-trigger">Open SVG modal window</a> HTML-模式信息 <div

我正在使用CodyHouse（）提供的一个很棒的SVG模式窗口，我可以毫无问题地添加它，但我无法添加多个窗口而不发生冲突，我尝试从HTML中修改ID，但一直不起作用，有人知道或者可以告诉我如何添加多个窗口吗

它使用

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>


SVG模态背景
模态信息
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);

    };
};

var modalTriggerBts=$（'a[data type=“cd modal trigger”]”），
coverLayer=$（'.cd coverLayer'）；
/*
将三次bezier值转换为自定义mina值
http://stackoverflow.com/questions/25265197/how-to-convert-a-cubic-bezier-value-to-a-custom-mina-easing-snap-svg
*/
var持续时间=600，
ε=（1000/60/duration）/4，
firstCustomMinaAnimation=bezier（.63、.35、.48、.92，ε）；
modalTriggerBts.each（函数（）{
initModal（$（this））；
});
函数initModal（modalTrigger）{
var modalTriggerId=modalTrigger.attr（'id'），
modal=$（'.cd modal[data modal=“'+modalTriggerId+'']'），
svgCoverLayer=modal.children（'.cd svg bg'），
path=svgCoverLayer.find（'path'），
路径数组=[]；
//存储捕捉对象
pathsArray[0]=Snap（“#”+paths.eq（0.attr（'id'）），
pathsArray[1]=Snap（“#”+paths.eq（1.attr（'id'）），
pathsArray[2]=Snap（“#”+paths.eq（2.attr（'id'））；
//存储路径“d”属性值
var pathSteps=[]；
pathSteps[0]=svgCoverLayer.data（'step1'）；
路径步骤[1]=svgCoverLayer.data（'step2'）；
路径步骤[2]=svgCoverLayer.data（'step3'）；
路径步骤[3]=svgCoverLayer.data（'step4'）；
pathSteps[4]=svgCoverLayer.data（'step5'）；
pathSteps[5]=svgCoverLayer.data（'step6'）；
//打开模式窗口
modalTrigger.on（'click'，函数（事件）{
event.preventDefault（）；
$（'body'）.addClass（'inside-our-work'）；
modal.addClass（'modal-is-visible'）；
coverLayer.addClass（'modal-is-visible'）；
animateModal（路径数组、路径步骤、持续时间、“打开”）；
});
//关闭模式窗口
模态.on（'click'，'modal close'，函数（事件）{
event.preventDefault（）；
$（'body'）.removeClass（'inside-our-work'）；
modal.removeClass（'modal-is-visible'）；
coverLayer.removeClass（“模态可见”）；
animateModal（路径数组、路径步骤、持续时间、“关闭”）；
});
}
函数animateModal（路径、路径步骤、持续时间、animationType）{
var path1=（animationType='open'）？路径步骤[1]：路径步骤[0]，
path2=（animationType='open'）？pathSteps[3]：pathSteps[2]，
path3=（animationType='open'）？路径步骤[5]：路径步骤[4]；
路径[0]。设置动画（{'d'：路径1}，持续时间，firstCustomMinaAnimation）；
路径[1]。设置动画（{'d'：路径2}，持续时间，firstCustomMinaAnimation）；
路径[2]。设置动画（{'d'：path3}，持续时间，firstCustomMinaAnimation）；
}
函数贝塞尔（x1，y1，x2，y2，ε）{
//https://github.com/arian/cubic-bezier
var curveX=函数（t）{
var v=1-t；
返回3*v*v*t*x1+3*v*t*t*x2+t*t*t；
};
var curveY=函数（t）{
var v=1-t；
返回3*v*v*t*y1+3*v*t*t*y2+t*t*t；
};
var derivativeCurveX=函数（t）{
var v=1-t；
返回3*（2*（t-1）*t+v*v）*x1+3*（-t*t*t+2*v*t）*x2；
};
返回函数（t）{
var x=t，t0，t1，t2，x2，d2，i；
//首先尝试牛顿方法的一些迭代——通常非常快。
对于（t2=x，i=0；i<8；i++）{
x2=曲线（t2）-x；
if（数学绝对值（x2）t1）返回曲线（t1）；
//回退到可靠性的二分法。
而（t0x2）t0=t2；
否则t1=t2；
t2=（t1-t0）*.5+t0；
}
//失败
返回曲线（t2）；
};
};
谢谢

我会回答我自己的问题，以防其他人正在考虑如何做而不喜欢我。 我们基本上需要修改三件事：

  • 链接的ID
  • 与链接ID同名的“数据模式”
  • SVG路径的ID（这是必要的，因为如果没有，它们会冲突，尽管一切都会正常工作，但动画根本不会应用
感谢：“@Claudia Romano”和“@Mauritis D'Silva”，非常感谢您在博客中的帮助

希望有帮助！

你能在同一个问题中发布你的代码吗？@DannyFardyJhonstonBermúdez没问题，我添加了代码。谢谢！当再次单击该按钮时，演示会崩溃。。。