我有一个用作菜单下拉菜单的模式。
为了完成这项工作,我手动将模式弹出窗口的高度设置为在菜单正下方。
为此,我添加确定的像素数,然后将css属性“ top”附加到具有固定像素数的模态。
我的问题是,它是从用户在页面顶部的位置开始设置该数字的,而不是从页面顶部的那个位置开始。
这是一个AngularJS模态,但是我使用jquery来设置css属性,如果jquery有css解决方案,那么它应该是一个适用的解决方案。
这是我从顶部开始设置像素数的方法:
var el = angular.element(element);
var thumbnail = el["0"];
var finalThumbnailContainer = thumbnail.parentElement;
var inte = 0;
while(inte != 3){
finalThumbnailContainer = finalThumbnailContainer.parentElement;
inte++;
}
var innerEl = angular.element(finalThumbnailContainer);
var top = ModalServices.getHorizontalMenuHeight();
//110
innerEl.css('top', top);
我对layout / css并不是特别擅长,也不知道该如何使用该模式从页面开始而不是用户当前在页面上的位置显示X像素。
在此,我将不胜感激。
谢谢,
这是模态html的图像:
第一幅图像是当滚动条位于页面顶部时出现的模态图像,第二幅图像是当滚动条位于页面下方时出现的模态图像。
最佳答案
当滚动条位于顶部时,我从顶部的静态距离中减去$(window).scrollTop(),从而找到了解决方案。
var el = angular.element(element);
var thumbnail = el["0"];
var finalThumbnailContainer = thumbnail.parentElement;
var inte = 0;
while(inte != 3){
finalThumbnailContainer = finalThumbnailContainer.parentElement;
inte++;
}
var innerEl = angular.element(finalThumbnailContainer);
var top = ModalServices.getHorizontalMenuHeight();
var scrollTop = $(window).scrollTop();
top = top - scrollTop;
innerEl.css('top', top);
现在,无论将滚动条设置在什么位置,模态都会降到菜单正下方的正确位置。