javascript - TypeError:btn.offset(…)在“变形模态”窗口中未定义

我找到了一个很好的变形模态脚本，试图将其添加到WordPress中，但是我不断收到以下错误：

TypeError: btn.offset(...) is undefined

我对Javascript不太满意，因此不确定要解决此问题到底需要做什么？我使用的是我发现的教程中的确切代码。

网址为：http://goo.gl/P4TAuw（向下滚动以找到模式部分）

代码：

jQuery(document).ready(function($){
//trigger the animation - open modal window
$('[data-type="modal-trigger"]').on('click', function(){
    var actionBtn = $(this),
        scaleValue = retrieveScale(actionBtn.next('.cd-modal-bg'));

    actionBtn.addClass('to-circle');
    actionBtn.next('.cd-modal-bg').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
        animateLayer(actionBtn.next('.cd-modal-bg'), scaleValue, true);
    });

    //if browser doesn't support transitions...
    if(actionBtn.parents('.no-csstransitions').length > 0 ) animateLayer(actionBtn.next('.cd-modal-bg'), scaleValue, true);
});

//trigger the animation - close modal window
$('.cd-section .cd-modal-close').on('click', function(){
    var section = $(this).parents('.cd-section');
    section.removeClass('modal-is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
        animateLayer(section.find('.cd-modal-bg'), 1, false);
    });

    //if browser doesn't support transitions...
    if(section.parents('.no-csstransitions').length > 0 ) animateLayer(section.find('.cd-modal-bg'), 1, false);
});

$(window).on('resize', function(){
    //on window resize - update cover layer dimention and position
    if($('.cd-section.modal-is-visible').length > 0) window.requestAnimationFrame(updateLayer);
});

function retrieveScale(btn) {
    var btnRadius = btn.width()/2,
        left = btn.offset().left + btnRadius,
        top = btn.offset().top + btnRadius - $(window).scrollTop(),
        scale = scaleValue(top, left, btnRadius, $(window).height(), $(window).width());

    btn.css('position', 'fixed').velocity({
        top: top - btnRadius,
        left: left - btnRadius,
        translateX: 0,
    }, 0);

    return scale;
}

function scaleValue( topValue, leftValue, radiusValue, windowW, windowH) {
    var maxDistHor = ( leftValue > windowW/2) ? leftValue : (windowW - leftValue),
        maxDistVert = ( topValue > windowH/2) ? topValue : (windowH - topValue);
    return Math.ceil(Math.sqrt( Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2) )/radiusValue);
}

function animateLayer(layer, scaleVal, bool) {
    layer.velocity({ scale: scaleVal }, 400, function(){
        $('body').toggleClass('overflow-hidden', bool);
        (bool)
            ? layer.parents('.cd-section').addClass('modal-is-visible').end().off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend')
            : layer.removeClass('is-visible').removeAttr( 'style' ).siblings('[data-type="modal-trigger"]').removeClass('to-circle');
    });
}

function updateLayer() {
    var layer = $('.cd-section.modal-is-visible').find('.cd-modal-bg'),
        layerRadius = layer.width()/2,
        layerTop = layer.siblings('.btn').offset().top + layerRadius - $(window).scrollTop(),
        layerLeft = layer.siblings('.btn').offset().left + layerRadius,
        scale = scaleValue(layerTop, layerLeft, layerRadius, $(window).height(), $(window).width());

    layer.velocity({
        top: layerTop - layerRadius,
        left: layerLeft - layerRadius,
        scale: scale,
    }, 0);
}
});

最佳答案

您应该使用siblings('.cd-modal-bg')选择器而不仅仅是next()，因为actionBtn之后的下一个元素是<br>。所以试试这个：

scaleValue = retrieveScale(actionBtn.siblings('.cd-modal-bg'));