1
Я использую потрясающее SVG-модальное окно от CodyHouse (SVG modal window tutorial and demo), я смог добавить его без проблем, но я не могу добавить несколько, не имея конфликта, я пробовал модифицировать ID из HTML, но не работает, кто-нибудь знает или может указать мне, как добавить больше одного, пожалуйста?Несколько модальных окон SVG
Используется 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);
};
};
Спасибо s!
Можете ли вы разместить свой код в том же вопросе, пожалуйста? –
@ DannyFardyJhonstonBermúdez Нет проблем, я добавил код. Благодаря! – arbustobce
DEMO рушится, когда нажимает на эту кнопку больше раз ... http://codyhouse.co/demo/svg-modal-window/index.html – Legionar