5 Modal/Dialog web development problems you should know

Jan 16, 2020(5 years ago)-

Fuxing Loh

In a perfect world, this is what you want:

1. Nested Positions

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

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.

.index-9,
.index-overlay,
.nuxt-progress {
  z-index: 1000000000 !important;
}
 
.index-1,
.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.

• Apple: It’s a feature, not a bug.
• You: But my modal is broken.
• Apple: This is completely intentional. It took quite a bit of work on our part to achieve this effect. :)
• You: ???
• Product Manager: Is it fixed yet?
• You: ???

Conclusion

Use a modal library.

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