How To create Modal Popup using HTML CSS and Javascript | modal tutorial

In the expansive realm of the internet and applications, you’ve likely encountered those small popup elements, haven’t you? They resemble miniature windows that appear on your screen. These popups serve various purposes, such as conveying information, requesting input, or enhancing website engagement. In this blog post, we’ll dissect the concept of modal popups, exploring their functionality and significance in the digital landscape.

Mastering Modal Popups: A Practical Guide

If you’re considering implementing modal popups, it’s essential to do so effectively. Here’s how to utilize them like a seasoned pro:

1. Relevance is Key: Deploy modal popups judiciously, ensuring they align with the user’s context. Ensure that the content or action prompted by the popup is directly related to the user’s current activity.
2. Timing is Crucial: Avoid bombarding users with popups as soon as they land on your site. Exercise restraint and employ triggers that are contextually appropriate, such as displaying popups when users are about to exit the site or after they’ve spent some time exploring it.
3. Clarity is Paramount: Clearly articulate the purpose of your popup and the desired action from the user. Keep the messaging straightforward, avoiding jargon or confusing language.
4. Facilitate Easy Closure: Provide users with a hassle-free way to dismiss the popup. Include a prominent close button or allow users to click outside the popup area to close it seamlessly.
5. Prioritize Accessibility: Ensure that your popups are accessible to all users, regardless of their abilities. Pay attention to factors such as screen reader compatibility and keyboard navigation to guarantee inclusivity.

The Impact of Modal Popups on Your Web Experience

Modal popups significantly influence your online interactions, and their effectiveness hinges on their appropriate usage. Here’s a breakdown of their role:

Attention Grabbers: Modal popups are crafted to capture your attention effectively. When employed correctly, they can convey crucial information or prompt essential actions.

Focused Engagement: By requiring your attention on the popup before resuming your previous task, modal popups ensure focused interaction. This feature is particularly beneficial for tasks that demand undivided attention.

Preventing Navigation Disruption: Modal popups prevent users from navigating to other pages or screens abruptly. This feature can enhance user experience by eliminating the need to reorient oneself.

Potential for Irritation: However, excessive or poorly timed usage of modal popups can become irritating. Users may feel inundated by frequent interruptions, disrupting their browsing flow and diminishing overall satisfaction.

Understanding the Mechanics of Modal Popups

Modal popups operate on a straightforward principle. Here’s a simplified breakdown of their functionality:

1. User Initiation: Modal popups are typically triggered by user actions. When you interact with a specific element, such as clicking a button, the popup appears on the screen.
2. Dimmed Background: To draw attention to the popup, the background content is often slightly darkened or blurred, creating a visual contrast.
3. Popup Presentation: The popup emerges prominently in the center or atop the main content of the webpage. Its appearance is tailored to convey a specific message or prompt a particular action.
4. Modal Behavior: Modal popups earn their name from their mode of operation, which requires users to address them before returning to their previous tasks. Users are compelled to interact with the popup first.
5. User Interaction: Within the popup, users can engage in various activities, such as entering information, reading messages, or making selections. Most popups offer options to confirm, deny, or dismiss.
6. Exit Options: Exiting the popup is typically facilitated by clicking outside of it or pressing the “Escape” key. Alternatively, some popups feature a dedicated close button for convenience.

HTML Code (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta tags for character set, browser compatibility, and viewport settings -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Title of the webpage -->
    <title>Modal Popup in HTML CSS Javascript | Codehal</title>
    <!-- Link to external stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Button to trigger the popup -->
    <button class="show-popup">Show Popup</button>
    <!-- Container for the popup -->
    <div class="popup-container">
        <!-- Popup box content -->
        <div class="popup-box">
            <!-- Title of the popup -->
            <h1>Hello World!</h1>
            <!-- Content of the popup -->
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eius itaque molestiae sit quidem ullam, quis ut molestias quas dolores cum ratione, sint quibusdam iusto.</p>
            <!-- Button to close the popup -->
            <button class="close-btn">OK</button>
        </div>
    </div>
    <!-- Link to external JavaScript file -->
    <script src="script.js"></script>
</body>
</html>

CSS Code (style.css)

/* Importing the "Poppins" font family from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

/* Resetting default styles and setting font family */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

/* Styling for the body */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Minimum height of the viewport */
  background: #f2f2f2; /* Background color */
}

/* Styling for the button to show the popup */
.show-popup {
  padding: 18px 40px; /* Padding for the button */
  background: #6e78ff; /* Background color */
  border: none; /* No border */
  outline: none; /* No outline */
  border-radius: 6px; /* Border radius */
  box-shadow: 0 0 10px rgba(0, 0, 0, .1); /* Box shadow */
  cursor: pointer; /* Cursor style */
  font-size: 18px; /* Font size */
  color: #f2f2f2; /* Font color */
  font-weight: 500; /* Font weight */
}

/* Styling for the container of the popup */
.popup-container {
  position: absolute; /* Positioning */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background: rgba(0, 0, 0, .3); /* Semi-transparent black background */
  display: flex; /* Flex display */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  opacity: 0; /* Initial opacity */
  pointer-events: none; /* No pointer events */
}

/* Styling for the active state of the popup container */
.popup-container.active {
  opacity: 1; /* Make the popup visible */
  pointer-events: auto; /* Allow pointer events */
  transition: .4s ease; /* Smooth transition */
}

/* Styling for the popup box within the popup container */
.popup-container .popup-box {
  width: 500px; /* Set width of the popup box */
  background: #f2f2f2; /* Background color */
  border-radius: 6px; /* Border radius */
  box-shadow: 0 0 10px rgba(0, 0, 0, .1); /* Box shadow */
  padding: 30px; /* Padding inside the popup box */
  transform: scale(0); /* Initially scale the popup box down to 0 size */
}

/* Styling for the active state of the popup box */
.popup-container.active .popup-box {
  transform: scale(1); /* Scale the popup box up to its original size */
  transition: .4s ease; /* Smooth transition */
  transition-delay: .25s; /* Delay the transition effect */
}

/* Styling for the heading within the popup box */
.popup-box h1 {
  color: #333; /* Heading color */
  line-height: 1; /* Line height */
}

/* Styling for paragraphs within the popup box */
.popup-box p {
  color: #333; /* Paragraph color */
  margin: 12px 0 20px; /* Margin */
}

/* Styling for the close button within the popup box */
.popup-box .close-btn {
  width: 100%; /* Full width */
  height: 45px; /* Height of the button */
  background: #6e78ff; /* Background color */
  border-radius: 6px; /* Border radius */
  border: none; /* No border */
  outline: none; /* No outline */
  box-shadow: 0 0 10px rgba(0, 0, 0, .1); /* Box shadow */
  cursor: pointer; /* Cursor style */
  font-size: 18px; /* Font size */
  color: #f2f2f2; /* Font color */
  font-weight: 500; /* Font weight */
}

Brief Explanation of the css above

• The CSS file starts with an import statement to import the “Poppins” font family from Google Fonts.
• The * selector resets default styles such as margin, padding, and box-sizing, and sets the font family to “Poppins”.
• Styles for the body ensure that content is centered both vertically and horizontally on the page with a minimum height of 100 viewport height (vh) and a background color of #f2f2f2.
• The .show-popup class styles the button used to show the popup, setting padding, background color, border, border radius, box shadow, cursor, font size, font color, and font weight.
• The .popup-container class styles the container of the popup, positioning it absolutely to cover the entire viewport, setting its background color to a semi-transparent black (#000) with 30% opacity, and initially hiding it by setting opacity to 0 and pointer-events to none.
• The .popup-container.active class is used to make the popup container visible when it is active, setting its opacity to 1 and pointer-events to auto to allow interaction, with a transition effect applied for smooth visibility changes.

JavaScript Code (action.js)

// Selecting elements from the DOM
const showPopup = document.querySelector('.show-popup'); // Selecting the element that triggers the popup
const popupContainer = document.querySelector('.popup-container'); // Selecting the container for the popup
const closeBtn = document.querySelector('.close-btn'); // Selecting the close button within the popup

// Adding click event listener to the showPopup element
showPopup.onclick = () => {
    // When showPopup is clicked, the 'active' class is added to the popup container
    popupContainer.classList.add('active');
}

// Adding click event listener to the closeBtn element
closeBtn.onclick = () => {
    // When closeBtn is clicked, the 'active' class is removed from the popup container
    popupContainer.classList.remove('active');
}

Brief Explanation of the above javascript

• The showPopup constant is assigned the reference to the HTML element with the class ‘show-popup’. This element is typically a button or a link that triggers the display of the popup.
• The popupContainer constant is assigned the reference to the HTML element with the class ‘popup-container’, which contains the popup content.
• The closeBtn constant is assigned the reference to the HTML element with the class ‘close-btn’, which represents the close button inside the popup.
• An onclick event handler is added to the showPopup element. When this element is clicked, the function inside the handler is executed. This function adds the ‘active’ class to the popupContainer, making the popup visible by toggling its visibility based on the presence of the ‘active’ class.
• Similarly, an onclick event handler is added to the closeBtn element. When this button is clicked, the function inside the handler is executed. This function removes the ‘active’ class from the popupContainer, hiding the popup.

conclusion

In summary, modal popups serve as small windows that appear on websites, offering either significant assistance or becoming a source of irritation, depending on their implementation. When utilized effectively, they can enhance your browsing experience by providing necessary information or simplifying tasks. However, excessive use may lead to a feeling of intrusion. Therefore, it’s essential to employ them judiciously, ensuring they contribute positively to your website’s functionality and user experience.