How to make a modal using CSS :modal pseudo-class

Sunkanmi FafoworaSunkanmi Fafowora
4 min read

How can you create a modal? Well, I’m glad you asked! A good way to create a modal on the web is by using two properties - the HTML <dialog> and the CSS pseudo-class :modal.

In this article, we will explore how the CSS :modal pseudo-class works and how we can use that to make a modal.

Creating your own modal

Step 1: Add dialog HTML element & button to open modal

The first step to creating your own modal is to write two HTML elements, a button to open your modal and another for the <dialog> HTML element because that’s what the :modal pseudo-class uses:

<body>
   <!-- Button to open dialog -->
  <button id="openModal" class="btn-primary">Open Modal</button>

  <!-- Dialog element -->
  <dialog id="myModal" class="modal">
    <h2 class="modal-title">Welcome to the Modal</h2>
    <p class="modal-content">This is a modern modal using the :modal pseudo-class!</p>
    <button id="closeModal" class="btn-secondary">Close</button>
  </dialog>

  <script src='main.js'></script>
</body>

Step 2: Add JavaScript to open and close modal

There is one way to open a modal and 3 ways to close a modal dialog using JavaScript which are:

  1. Using the .showModal() on the dialog element to show the dialog and closed using the .close() method

     const modal = document.getElementById('myModal');
 const openButton = document.getElementById('openModal');
 const closeButton = document.getElementById('closeModal');

 // Open the modal
 openButton.addEventListener('click', () => {
   modal.showModal();
 });

 // Close the modal directly using the .close() method
 closeButton.addEventListener('click', () => {
   modal.close();
 });

  2. Using the .showModal() on the dialog element to show the dialog and closed using the dialog method when submitting form that is nested within the dialog HTML element

     <button id="openButton">Open Modal</button>

 <dialog id="formModal">
   <h2>Modal Title</h2>
   <p>This modal will close when the form is submitted.</p>

    <!-- Adding the form method 'dialog' and the submit button would close the form if clicked -->
   <form method="dialog">
     <button type="submit">Submit Form to Close</button>
   </form>
 </dialog>

     const openButton = document.getElementById('openButton');

 // You'd just need to open the modal. Closing is already handled by the form submission
 openButton.addEventListener('click', () => {
   modal.showModal();
 });

  3. Using the .showModal() on the dialog element to show the dialog and closed using the ESC key (no need for code for this, it is automatically done)

Step 3: Add CSS for styling

Here’s the CSS code for styling:

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: #fff;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

/* Primary button style */
.btn-primary {
  background-color: #2575fc;
  color: #fff;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #6a11cb;
}

/* Secondary button style */
.btn-secondary {
  background-color: #f44336;
  color: #fff;
  transition: background-color 0.3s ease;
}

.btn-secondary:hover {
  background-color: #d32f2f;
}

:modal {
  border: none;
  border-radius: 10px;
  padding: 20px;
  background-color: #fff;
  color: #333;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

:modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

Bringing it all together

Here’s what my final code looks like.

HTML code:

<body>
  <button id="openModal" class="btn-primary">Open Modal</button>

  <dialog id="myModal" class="modal">
    <h2 class="modal-title">Welcome to the Modal</h2>
    <p class="modal-content">This is a modern modal using the :modal pseudo-class!</p>
    <button id="closeModal" class="btn-secondary">Close</button>
  </dialog>

  <script src='main.js'></script>
</body>

CSS code:

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: #fff;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

/* Primary button style */
.btn-primary {
  background-color: #2575fc;
  color: #fff;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #6a11cb;
}

/* Secondary button style */
.btn-secondary {
  background-color: #f44336;
  color: #fff;
  transition: background-color 0.3s ease;
}

.btn-secondary:hover {
  background-color: #d32f2f;
}

:modal {
  border: none;
  border-radius: 10px;
  padding: 20px;
  background-color: #fff;
  color: #333;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

:modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

JavaScript code:

const openModalButton = document.getElementById('openModal');
const closeModalButton = document.getElementById('closeModal');
const modal = document.getElementById('myModal');

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

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

Without further ado, here’s how the result of the code!

Conclusion

In this article, you learned how to make a modal using the CSS :modal pseudo-class and you also learned three ways of closing them. Thank you for reading this thus far. I appreciate you and I hope to see you in the next article. ❤

10
Subscribe to my newsletter

Read articles from Sunkanmi Fafowora directly inside your inbox. Subscribe to the newsletter, and don't miss out.

CSSCSS3Frontend Development#howtoscss-corner

Written by

Sunkanmi Fafowora
Sunkanmi Fafowora

Lover of all things tech. I write articles on Front-end development, JavaScript, React, Python, and anything that makes my life easier. Thanks for stopping by! 😊💛