以编程方式相对于页面顶部设置模态位置

Question

我有一个模式用作菜单下拉菜单。为了完成这项工作，我手动将模式弹出的高度设置在菜单正下方。为此，我添加了确定的像素数，并将 css 属性 "top" 附加到具有固定像素数的模态。我遇到的问题是它是从用户所在页面的顶部开始设置该数字，而不是页面的最顶部。这是一个 AngularJS 模态，但我使用 jquery 设置 css 属性，如果有 css 解决方案 jquery，它应该是一个适用的解决方案。

这里是我如何设置距离顶部的像素数：

                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 的图像：

第一张图是滚动条在页面顶部时出现的模态图，第二张图是滚动条向下一点时出现的模态图。

Answer 1

当滚动条位于顶部时，我从与顶部的静态距离中减去 $(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);

现在，无论滚动条设置在何处，模态框都会下降到菜单正下方的正确位置....看哪！

以编程方式相对于页面顶部设置模态位置

Set Modal position programmatically relative to the very top of the page

jquery

css

angularjs

modal-dialog

position