Become a member
Sign in
React Modals — scalable, customizable, neat components!
834
11
Dan Park
JP Marks
JP Marks
Aug 31, 2018 · 1 min read

You can user modern css grid to simplify the styling of the modal:

.modal {

position: fixed;
height: 100%;
width: 100%;
background-color: grey;
opacity: 0.3;
z-index: 1000;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas:
“modal”;
> div {
grid-area: modal;
place-self: center;
}

}

  • React
  • JavaScript
  • Modals
  • Redux
  • React Redux
JP Marks

Written by

JP Marks

Write the first response

Discover Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Make Medium yours

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Become a member

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade
AboutHelpLegal