Fuxing Loh

Jan 16, 2020(4 years ago)

Web: 5 Modal/Dialog development problems you should know

In a perfect world, this is what you want:


1. Nested Positions


<div style="positon: relative">
  <modal-dialog style="position: absolute" />

Having multiple conflicting nested positions. Using position: fixed might fix your problem but in some older browser or some edge scenario, position: fixed still works unreliably when the element is nested inside other position values.

2. Overlapping z-index


Overlapping z-indices can be an annoying problem when trying to render your modal above element with higher z-index implementation. However, you can’t just avoid using z-index entirely, some design requirement still requires you to use z-index to overlay elements above.

For my projects, I have a z-index schema that I reference.

.nuxt-progress {
  z-index: 1000000000 !important;

.index-content {
  z-index: 10;

.index--1 {
  z-index: -1;

3. Cascading Parent CSS


.parent {
  font-size: 24px;

If you nest your Modal inside a parent element with overarching CSS rules, it might conflict with your modal CSS rules.

4. Scrolling Issues


Your body scroll when your modal is above. You tried locking the scroll bar, but your modal has overflowing content.

Solution? Use this body-scroll-lock library.

5. iOS Safari 100vh


What you see when designing. What you see when testing. What the user actually sees. What you actually want.


Use a modal library.

Also, you can check out this microsite that I created to illustrate those 5 issues.