1. Tutorials
  2. JavaScript Tutorial
  3. Building a Simple Modal using HTML, CSS, and JavaScript

Building a Simple Modal using HTML, CSS, and JavaScript

Submitted by oretnom23 on Wednesday, September 10, 2025 - 16:34.

In this tutorial, we will learn how to create a simple yet highly usable feature that can be integrated into any web application project. We will build a Simple Modal using HTML, CSS, and JavaScript. A modal window is one of the most commonly used components in modern web design and development because it enhances user interaction without requiring page reloads or redirects.

What is a Modal?

In a web application, a modal is a popup user interface element that appears on top of the main content. Typically, the background content is dimmed or disabled, directing the user’s focus to the modal itself. The modal remains open until the user either closes it or performs a required action. This makes modals an effective way to capture attention and streamline user interaction.

Modals are commonly used for:

  • Login or Sign-up Forms – Quickly prompt users to authenticate without navigating away from the current page.
  • Alerts or Confirmations – Display important notifications, warnings, or confirmation messages before proceeding with an action.
  • Displaying Additional Information – Show more details about a product, service, or feature without cluttering the main page layout.
  • Other Pop-up Forms – Collect user feedback, subscriptions, or other inputs in a seamless and user-friendly way.

By the end of this tutorial, you will have a fully functional modal that you can easily reuse and customize in any web application project.

What Do We Need?

To create the Simple Modal, we only need the following tools:

  • Code Editor – such as Sublime Text or Visual Studio Code (VS Code) to write and edit the code.
  • Web Browser – such as Google Chrome, to open the page and test the modal functionality.

Let's get started...

We will now build a simple web application that contains a functional modal window and buttons to trigger its show/hide behavior.

Step 1: Creating the Interface

First, let's create a new HTML file and save it as index.html. This file will contain the core HTML structure, including the modal elements and the buttons that trigger it. We will also link the external CSS and JavaScript (JS) files in this HTML file, which will be explained further in the next steps.

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Popup Modal using HTML, CSS, JS</title>
  7.     <link rel="stylesheet" href="style.css">
  8. </head>
  10.     <!-- Page Wrapper -->
  11.     <div id="wrapper">
  12.         <!-- Modal Trigger Button -->
  13.         <button id="show-btn" type="button">Show Modal</button>
  14.     </div>
  15.     <!-- Page Wrapper -->
  16.  
  17.     <!-- Modal -->
  18.     <div id="modal">
  19.         <!-- Modal Container -->
  20.         <div class="modal-container">
  21.             <!-- Modal Header -->
  22.             <div class="modal-header">
  23.                 <div class="modal-title">Sample Modal</div>
  24.             </div>
  25.             <!-- Modal Header -->
  26.             <!-- Modal Body -->
  27.             <div class="modal-body">
  28.                 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas dolor rutrum nunc vulputate efficitur. Nullam rutrum, arcu eget mollis maximus, sapien urna auctor risus, eu blandit ex justo at mi. Nulla facilisi. Vivamus dignissim lacinia fringilla.</div>
  29.             </div>
  30.             <!-- Modal Body -->
  31.             <!-- Modal Footer -->
  32.             <div class="modal-footer">
  33.                 <!-- Modal Close Button -->
  34.                 <button id="close-btn" type="button">Close</button>
  35.             </div>
  36.             <!-- Modal Footer -->
  37.         <!-- Modal Container -->
  38.         </div>
  39.     </div>
  40.     <!-- Modal -->
  41.     <script src="script.js"></script>
  42. </body>
  43. </html>

Step 2: Designing the Interface

Next, let's create a new Cascading Style Sheets (CSS) file and save it as style.css. This stylesheet will define the structure, layout, and overall design of the application’s interface. By styling the elements properly, the style.css file makes the web application look more professional, visually appealing, and user-friendly.

  1. * {
  2.     box-sizing: border-box;
  3. }
  4.  
  5. html,
  6. body{
  7.     margin: unset;
  8.     padding: 10px 20px;
  9.     background-color: #6D94C5;
  10.     height: 100%;
  11.     width: 100%;
  12. }
  13.  
  14. /* Main Wrapper */
  15. #wrapper{
  16.     height: 100%;
  17.     width: 100%;
  18.     display: flex;
  19.     flex-flow: column wrap;
  20.     align-items: center;
  21.     justify-content: center;
  22. }
  23.  
  24. /* Trigger Button */
  25. #show-btn{
  26.     width: 150px;
  27.     padding: 5px 3px;
  28.     border-radius: 3px;
  29.     outline: none;
  30.     border: unset;
  31.     box-shadow: 3px 5px 7px #00000050;
  32.     cursor: pointer;
  33. }
  34.  
  35. #show-btn:hover,
  36. #show-btn:active{
  37.     transform: scale(1.1);
  38. }
  39.  
  40. /* Modal */
  41. #modal{
  42.     position: fixed;
  43.     top: 0;
  44.     left: 0;
  45.     width: 100%;
  46.     height: 100%;
  47.     overflow: auto;
  48.     display: flex;
  49.     flex-flow: row wrap;
  50.     align-items: center;
  51.     justify-content: center;
  52.     transition: all .3s ease-in-out;
  53.     transform: translateY(-1000px);
  54. }
  55.  
  56. /* Modal Container */
  57. #modal .modal-container{
  58.     width: 300px;
  59.     background-color: #fff;
  60.     border-radius: 3px;
  61.     box-shadow: 3px 3px 5px #ffffff1d;
  62. }
  63.  
  64. /* Modal Header */
  65. #modal .modal-container .modal-header{
  66.     display: flex;
  67.     flex-flow: row wrap;
  68.     width: 100%;
  69.     padding: 15px 10px;
  70.     border-bottom: 1px solid #0000001a;
  71. }
  72.  
  73. /* Modal Body */
  74. #modal .modal-container .modal-body{
  75.     width: 100%;
  76.     padding: 5px 10px;
  77. }
  78.  
  79. /* Modal Footer */
  80. #modal .modal-container .modal-footer{
  81.     display: flex;
  82.     flex-flow: row-reverse wrap;
  83.     width: 100%;
  84.     padding: 10px 10px;
  85.     border-top: 1px solid #0000001a;
  86. }
  87.  
  88. /* Close Button */
  89. #close-btn{
  90.     outline: none;
  91.     border: unset;
  92.     background-color: #e4e4e4;
  93.     cursor: pointer;
  94. }
  95.  
  96. #close-btn:hover,
  97. #close-btn:active{
  98.     transform: scale(1.05);
  99. }
  100.  
  101. /* Show Modal */
  102. #modal.show{
  103.     transform: translateX(0);
  104. }

Step 3: Creating the Functionality

Lastly, let's create a new JavaScript file and save it as script.js. This file contains the JavaScript code that makes our modal fully functional. It includes the event listeners for the trigger buttons and the corresponding functions that handle the opening and closing of the modal window. With this script, we can add interactivity to our application and ensure a smooth user experience.

  1. // Show Button Element
  2. const showBtn = document.getElementById("show-btn");
  3. // Close Button Element
  4. const closeBtn = document.getElementById("close-btn");
  5. // Modal Element
  6. const modal = document.getElementById("modal");
  7.  
  8. window.onload = function(){
  9.     // Event Listener when triggering to open the modal
  10.     showBtn.addEventListener("click", ShowModal);
  11.     // Event Listener when triggering to close the modal
  12.     closeBtn.addEventListener("click", HideModal);
  13. }
  14.  
  15. // Show Modal Function
  16. function ShowModal(){
  17.     // Adding the class to the modal to show the element
  18.     if(!modal.classList.contains("show"))
  19.     modal.classList.add("show");
  20.     // Adding a background for the backdrop of the modal
  21.     setTimeout(function(){
  22.         modal.style.backgroundColor = "#00000049";
  23.     }, 250);
  24. }
  25.  
  26. function HideModal(){
  27.     // removing the backdrop of the modal
  28.     modal.style.backgroundColor = "";
  29.     setTimeout(function(){
  30.         // Hiding the modal
  31.         if(modal.classList.contains("show"))
  32.             modal.classList.remove("show");
  33.     }, 250);
  34.  
  35. }

Result

Below are the sample images showing the final output of our Simple Web Application with Modal created using HTML, CSS, and JavaScript:

Web App Page

Simple Web Page with Modal using HTML, CSS, and JavaScript

Modal Window when Shown

Modal Window Example using HTML, CSS, and JavaScript

And there you have it! I have also provided a downloadable source code package (ZIP file) that contains the complete script used in this tutorial. You are free to download, modify, and integrate it into your own projects.

I hope this Simple Modal Tutorial using HTML, CSS, and JavaScript has helped you understand how to build a useful and reusable feature for your web applications. You can now enhance your projects with this modal window and customize it according to your needs.

Don’t forget to explore more on this website for additional Programming Tutorials, Free Source Codes, and Articles covering various web development and programming languages.

Happy Coding =)

Tags
HTML
css
js
Modal Window
popup modal