類型錯誤：btn.offset（...）是未定義的變形方法模態窗口

Question

我發現我試圖添加到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); 
} 
}); 

Answer 1

您應該使用siblings('.cd-modal-bg')選擇不只是next()，因爲actionBtn後的下一個元素是<br>。所以試試這個：

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