无法读取 属性 单击按钮打开模态 window 时出现 'top'
Cannot Read Property 'top' occurs when click button to open modal window
以下代码在页面加载时起作用。但是,当我点击一个应该打开模态 window 的按钮时,出现以下错误:
未捕获的类型错误:无法读取未定义的 属性 'top'
我该如何解决这个错误?
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);
});
试试下面的代码:
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
的值
您收到错误的可能原因是 $(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');
}
以下代码在页面加载时起作用。但是,当我点击一个应该打开模态 window 的按钮时,出现以下错误:
未捕获的类型错误:无法读取未定义的 属性 'top'
我该如何解决这个错误?
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);
});
试试下面的代码:
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
您收到错误的可能原因是 $(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');
}