search

yalabot / angular-foundation

http://pineconellc.github.io/angular-foundation/
Other
1.05k stars 266 forks source link

Fix vertical position of modal when ".reveal-modal" has % "top" property #319

Open kristinalim opened 5 years ago

kristinalim commented 5 years ago

Fix vertical position of modal when .reveal-modal has % "top" property

(I also submitted https://github.com/cwadrupldijjit/angular-foundation/pull/1.)

Description

Currently, if the "reveal-modal" CSS class is assigned an n% "top" CSS property, the modal would be positioned n px from the top of the viewport.

The modal uses the following JS:

window.getComputedStyle(element).top

The library inserts an invisible faux modal, computes its top position using above, removes the faux modal, and then inserts the real modal which applies the top position computed earlier.

However, an absolute-positioned element with % "top" property that is hidden through display: none; does not evaluate the JS to the same value as when it is visible. The computed "top" value for the hidden element is still the % value, while it is the computed px value if the element is visible or when using visibility: hidden. This is demonstrated in this Plunker.

$modalStack.open expects the expression above to return the px value, so a 10% value gets treated as 10px. This is not the desired behavior, and a big limitation now that people use a big range of screen sizes.

The faux modal is temporarily inserted with z-index: -1 (JS), display: none (CSS), and visibility: hidden (CSS).

As a workaround, this commit applies display: block (JS) to the faux modal.

Release notes

Changelog Category: Bug Fixes

kristinalim commented 5 years ago

I updated the PR description to be clearer.