javascript - How can I horizontally/vertically center a modal popup when the modal is sometimes bigger than the screen?

Question

I know how to center a modal with javascript but I run into a problem when the modal is taller than the viewport. The top of the modal will be hidden off the top of the screen.

Answer 1

你想拿

    (windowHeight - modalHeight) / 2 

作为模态的顶部位置

    if (modalHeight < windowHeight) 
    else make top as 0 or may be 10. 

我想你已经解释过了。

一个可能的问题是，如果您使用的是固定定位的模态，溢出的部分不会显示，在这种情况下，您应该提供一个小提琴或链接来帮助您处理您的案例。

对于固定定位溢出，您可以将模态最大高度设为 100% 并在模态中显示滚动条。如果模态框是叠加层的子级，您可以将叠加层的最大高度设置为 100%，并在叠加层上使用滚动条。

如果您使用的是绝对定位模态，您将获得 body 的滚动条。

伪代码

top = (modalHeight < windowHeight)? (windowHeight - modalHeight) / 2 : 10 ;