Dialog Modal With Open Props

Summary

Here we create a modal with the html dialog element, javascript and Open Props css library.

Lets import the Open Props css library.

@import 'https://unpkg.com/open-props';

Style the modal.

.modal {
  padding: 1em;
  max-width: 50ch;
  border: 0;
  box-shadow: 0 0 1em rgb(0 0 0 / 0.3);

  & > * {
    margin: 0 0 0.5rem 0;
  }
}

.modal::backdrop {
  background: linear-gradient(45deg, red, blue);
  opacity: 0.4;
}

Extra styles.

body {
  min-height: 100vh;
  margin: 2rem;
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--gray-8);
  background-image: url('https://images.unsplash.com/photo-1698414805297-2578132f62fb?auto=format&fit=crop&q=80&w=2729&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
  background-size: cover;
}

h1 em {
  color: var(--cyan-9);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.button {
  border: 0;
  cursor: pointer;
  background: var(--gray-8);
  color: var(--gray-2);
  font-weight: 700;
  padding: var(--size-2) var(--size-4);
  padding: 10px;
  font-size: 1.25em;
  border-radius: var(--size-2);
}

.button:hover,
.button:focus {
  background: var(--cyan-9);
}

Add the HTML. I have just added some Lorem text as a placeholder.

<h1>Modals the <em>easy</em> way</h1>

<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit alias dicta
  quibusdam cumque ipsa ipsum reiciendis animi, officia provident veniam quis
  delectus minima earum suscipit ea, beatae vitae ipsam nemo.
</p>

<p>
  Alias, architecto sapiente nostrum id, sed explicabo numquam aspernatur
  ratione qui excepturi repellat porro culpa molestiae? Culpa dolorem commodi
  cupiditate, eos deleniti similique repellendus nam velit natus a soluta et.
</p>

<p>
  Fugiat ratione impedit officiis? Eligendi sapiente culpa tenetur esse quo
  reiciendis illum vero nisi ullam consequatur illo molestiae, nihil eaque. Esse
  asperiores tenetur natus! Quo asperiores molestias sed assumenda alias.
</p>

<p>
  Sequi quo animi, nostrum laboriosam veritatis consequatur. Eos cumque unde
  porro explicabo provident, possimus alias magni pariatur quis consequuntur
  voluptatum? Debitis necessitatibus facilis fugiat repudiandae nobis neque nam,
  vel odio?
</p>

<button class="button open-button">open modal</button>

<dialog class="modal" id="modal">
  <h2>An interesting title</h2>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum esse nisi,
    laboriosam illum temporibus ipsam?
  </p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, quo.</p>

  <button class="button close-button">close modal</button>
</dialog>

Add the js.

const modal = document.querySelector('#modal');
const openModal = document.querySelector('.open-button');
const closeModal = document.querySelector('.close-button');

openModal.addEventListener('click', () => {
  modal.showModal();
});

closeModal.addEventListener('click', () => {
  modal.close();
});

Tech and Tools

• CSS
• HTML
• JavaScript
• JS Fiddle

Demo

Open demo on JS Fiddle.

Link to Demo