单击按钮打开模式窗口时发生无法读取属性“顶部”答案

【问题标题】：Cannot Read Property 'top' occurs when click button to open modal window单击按钮打开模式窗口时发生无法读取属性“顶部”
【发布时间】：2015-04-21 06:43:00
【问题描述】：

以下代码在页面加载时有效。但是，当我单击应该打开模式窗口的按钮时，出现以下错误：

未捕获的类型错误：无法读取未定义的属性“顶部”

我该如何解决这个错误？

if ($(window).width() > 992) {

    (function($) {
        "use strict";
        $(".page-scroll a[href^='#'], #intro a").on('click', function(e) {
            e.preventDefault();
            var hash = this.hash;
            $('html, body').stop().animate({
                scrollTop: $(hash).offset().top - 100}, 2000, 'easeOutExpo');
        });
    })(jQuery);

    $('body').scrollspy({
        target: '.navbar',
        offset: 110
    });
    // alert("large");
}
else {

    (function($) {
        "use strict";
        $(".page-scroll a[href^='#'], #intro a").on('click', function(e) {
            e.preventDefault();
            var hash = this.hash;
            $('html, body').stop().animate({
                scrollTop: $(hash).offset().top - 50}, 2000, 'easeOutExpo');
        });
    })(jQuery);

    $('body').scrollspy({
        target: '.navbar',
        offset: 70
    });
    // alert("small");
}   

//modal popup function
function popup_modal(item){
    var link = $(item).attr('id');
    $('#bootstrap_modal').load('/'+link+'');
    $('#bootstrap_modal').modal('show'); 
    $("#bootstrap_modal").on("show", function () {
        $("body").addClass("modal-open");
    }).on("hidden", function () {
        $("body").removeClass("modal-open")
    });
}

//Modal pop up
$('.mmodal').on('click', function(){
    popup_modal(this);
});

【问题讨论】：

能看到 html 也很高兴，它应该与 $(hash).offset().top - 50}, 2000, 'easeOutExpo');

标签： javascript jquery bootstrap-modal

【解决方案1】：

您收到错误的可能原因是，对于您的模态按钮，$(hash) 元素不存在。而模态按钮是属于$(".page-scroll a[href^='#'], #intro a").on('click')事件的元素。如果没有元素的 id 等于单击按钮的“href”属性，则无法获得它的“offset.top”。输入“console.log(hash)”来检查你得到了什么。

一个可能的解决方案：

if ($(hash).length) {
    $('html, body').stop().animate({
         scrollTop: $(hash).offset().top - 100}, 2000, 'easeOutExpo');
}

【讨论】：

我试过了，但它产生了一个奇怪的错误'意外令牌）'我完全按照你上面显示的方式输入了它
我犯了一个语法错误，我的错。现在看看，它不应该返回任何错误。此外，将您的示例放在 jsfiddle 或类似的东西中会很好。在不知道发生了什么的情况下很难调试。
像魅力一样工作。谢谢你说。

【解决方案2】：

试试下面的代码：

if ($(window).width() > 992) {

    (function($) {
        "use strict";
        $(".page-scroll a[href^='#'], #intro a").on('click', function(e) {
            e.preventDefault();
            var hash = this.hash;
            var newVal = $(hash).offset().top - 100;
            $('html, body').stop().animate({
                scrollTop: newVal}, 2000, 'easeOutExpo');
        });
    })(jQuery);

    $('body').scrollspy({
        target: '.navbar',
        offset: 110
    });
    // alert("large");
}
else {

    (function($) {
        "use strict";
        $(".page-scroll a[href^='#'], #intro a").on('click', function(e) {
            e.preventDefault();
            var hash = this.hash;
            var newVal = $(hash).offset().top - 50;
            $('html, body').stop().animate({
                scrollTop: newVal}, 2000, 'easeOutExpo');
        });
    })(jQuery);

    $('body').scrollspy({
        target: '.navbar',
        offset: 70
    });
    // alert("small");
}   

//modal popup function
function popup_modal(item){
    var link = $(item).attr('id');
    $('#bootstrap_modal').load('/'+link+'');
    $('#bootstrap_modal').modal('show'); 
    $("#bootstrap_modal").on("show", function () {
        $("body").addClass("modal-open");
    }).on("hidden", function () {
        $("body").removeClass("modal-open")
    });
}

//Modal pop up
$('.mmodal').on('click', function(){
    popup_modal(this);
});

我已将变量newVal 设置为$(hash).offset().top - 50 的值

【讨论】：