How to Implement a Custom Modal with CSS

OUTLINE

Introduction
Prerequisite
Step-by-step process on how to implement a custom modal with CSS
Conclusion

Introduction

Modal (also known as dialog boxes or popups) is a UI (User Interface) component that is displayed on top of the main content on a web page. In this article, we will explore how to implement a custom modal using CSS.

Prerequisite

HTML
CSS
Basic JavaScript

Step-by-step process on how to implement a custom modal with CSS

STEP 1: Create the HTML structure

In this step, we will start by setting up the basic HTML structure for the main page and the modal.



<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- CSS stylesheet -->
        <link rel="stylesheet" href="src/styles.css">

        <title>How to implement a custom modal with CSS</title>
    </head>
<body>  

    <div class="main">

        <nav class="navbar">
            <ul>
                <li class="navbrand">QuantaCore Labs</li>
                <li class="navitem">About</li>
                <li class="navitem">Products</li>
                <li class="navitem">Pricing</li>
                <li class="navitem">Request Demo</li>
            </ul>
        </nav>

        <div class="hero-content">
            <h1 class="content-heading">Innovative and data-driven <br/> solutions for your business</h1>
            <p class="content-subheading">
                We are a cutting-edge technology company dedicated to delivering innovative solutions for complex data processing and analysis. <br/>
                We empower organizations to gain actionable insights and make smarter, data-backed decisions faster than ever before.
            </p>

            <div>
             <button id="open-modal" class="open-modal-btn">Read More</button>
           </div>
        </div>
    </div>

    <div id="modal-overlay">
        <div class="modal">
            <div>
                <div class="modal-close-button close-icon">&times;</div>
            </div>
            <div class="modal-content">
               <h2 class="modal-content-heading">Privacy Policy</h2>
               <p class="modal-content-subheading">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
                labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
                qui officia deserunt mollit anim id est laborum.
               </p>
               <button class="close-button modal-accept-button">Okay, I understand</button>
            </div>
        </div>
    </div>

    <script src="src/script.js"></script>
</body>
</html>

STEP 2: Style the page and the modal

Next, we will use CSS to style the main page, modal, and add features such as a close button, animations, and responsive styles.




@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500;600;700&display=swap');

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
 }

 html{
    font-size: 62.5%;
 }

 body{
    font-family: 'Raleway', sans-serif;
    background-color: #eff0f9;
 }

 .navbrand {
   margin-right: auto;
   font-weight: bold;
   letter-spacing: 1px; 
   font-size: 2em;
}

 .navbar {
   width: 100%;
   padding: 20px 10px;
   background-color: #4E56EE;
   color: #ffff;
}

.navbar ul {
   list-style-type: none;
   display: flex;
   margin: 0 auto;
   max-width: 1200px;
   align-items: center;
}

li {
   margin: 0 2rem;
   font-size: 1.5rem;
}

.hero-content {
   margin: 12rem auto;
   text-align: center;
}

.content-heading {
   font-size: 4.5rem;
}

.content-subheading {
   font-size: 1.5rem;
   padding: 1rem 5rem 4rem;
   line-height: 1.8; 
}

 /* Modal */

#modal-overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    animation: slide-down 0.3s ease;
    animation-fill-mode: forwards;
    transform: translateY(-100%);
  }

@keyframes slide-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.modal { 
    max-width: 480px;
    height: 300px;
    margin: 200px auto;
    background-color: #ffff;
    border-radius: 5px;
    padding: 0rem 2rem;
    animation:scale-up-center .4s cubic-bezier(.39,.575,.565,1.000) both
  }

  @keyframes scale-up-center {
    0% {
      transform: scale(.5)
    }
    100% {
      transform: scale(1)
    }
  } 

.close-icon {
   font-size: 4rem;
   text-align: right;
   cursor: pointer;
}

.modal-content {
   text-align: center;
   padding-top: 2rem;
}

.modal-content-heading {
    color: #4E56EE;
    font-size: 2rem;
    margin-top: 0;
}

.modal-content-subheading {
    font-size: 1.2rem;
    line-height: 1.5;
    padding: 1.3rem 1.5rem;
}

.close-button,
.open-modal-btn {
    background-color: #4E56EE;
    color: #ffff;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 1.2rem 2rem;
    margin-top: 1rem;
    outline: none;
    border: none;
    text-transform: uppercase;
    font-weight: 600;
  }

  .open-modal-btn:hover,
  .open-modal-btn:focus{
    background-color: #ffff;
    color: #4E56EE;
    border: 1px solid #4E56EE;
  }

  @media screen and (max-width: 540px) { 

    .navbrand {
      font-size: 1.5rem;
    }

    .navitem {
      display: none;
    }

    .hero-content {
      margin: 6rem auto;
    }

    .content-heading {
      font-size: 2.5rem;
    }

    .content-subheading {
      font-size: 0.8rem;
      padding: 1rem 3rem 4rem;
      line-height: 1.8;
    }

    .modal { 
      max-width: 300px;
      height: 320px;
      padding: 0rem 1rem;
    }

  }

STEP 3: Add JavaScript for interactivity

Lastly, we will add JavaScript to control the visibility of the modal component. We will set up event listeners on various elements to handle the opening and closing behaviour of the modal component.




const modalOverlay = document.getElementById('modal-overlay');
const modalOpen = document.getElementById('open-modal');
const modalClose = document.querySelector('.modal-close-button');
const modalAcceptBtn = document.querySelector('.modal-accept-button');

modalOpen.addEventListener('click', (event) => {
    modalOverlay.style.display = 'block';
});

modalClose.addEventListener('click', (event) => {
    modalOverlay.style.display = 'none';
  });

modalAcceptBtn.addEventListener('click', (event) => {
     modalOverlay.style.display = 'none';
});

Links

GitHub Link

Live Link

Conclusion

By following the step by step guide outlined above, you can create a custom modal using CSS and also customize the content, styles, animations, and responsiveness according to your design preferences.

Blog