Create Popup Alert Box with Close Functionality using HTML, CSS, and JavaScript

Faraz

By Faraz -

Learn how to create a simple popup alert box with close functionality using HTML, CSS, and JavaScript. Follow this step-by-step guide to add a popup to your website.

Join us on Telegram
create-popup-alert-box-with-close-functionality-using-html-css-and-javascript.webp
Read AlsoCreating a Youtube Sidebar with HTML, CSS, and JavaScript.jpgCreating a YouTube Sidebar with HTML, CSS, and JavaScript: A Step-by-Step Guide

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

In this tutorial, you will learn how to create a popup alert box with a close button using HTML, CSS, and JavaScript. This is a great feature to add to your website for displaying important messages or notifications. By the end of this guide, you'll be able to build a functional popup alert that can be triggered and closed with a button.

Prerequisites:

  • Basic knowledge of HTML, CSS, and JavaScript.
  • A code editor like VS Code or Sublime Text.
  • A browser to test your code.

Source Code

Step 1 (HTML Code):

Start by creating a basic HTML structure for the popup. This includes a div for the popup content and a close button. Here’s a breakdown of each section:

<!DOCTYPE html>

  • Declares the document type and version of HTML (HTML5).

<html lang="en">

  • The root element of the HTML document, specifying that the language of the content is English (lang="en").

<head>

Contains metadata and links to external resources:

  • <meta charset="UTF-8">: Specifies the character encoding for the document (UTF-8).
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive and scales correctly on different devices, setting the width to the device's width.
  • <title>Alert Box</title>: Sets the title of the page as "Alert Box" (this appears in the browser tab).
  • <link rel="stylesheet" href="https://fonts.googleapis.com/">: Links to an external Google font (Poppins) for styling text.
  • <link rel="stylesheet" href="styles.css">: Links to an external CSS file (styles.css) for additional styles.

<body>

The content of the webpage:

  • <div id="notification" class="notification">: A section (div) with an ID of notification and a class of notification, which will contain the alert box.
    • <a href="#" target="_blank" rel="noreferrer" class="message">: A clickable link with the message "Subscribe now to get the latest updates and exclusive deals!" that opens in a new tab (target="_blank"). The rel="noreferrer" attribute ensures no referrer information is sent when the link is clicked.
    • <button id="close-btn" class="close-btn">: A button with an ID of close-btn and a class of close-btn to close the notification.
      • Inside the button, there’s an SVG icon representing a close (X) button. The SVG code draws the "X" symbol to visually represent the close button.

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

  • Links to an external JavaScript file (script.js) that contains functionality to close the notification when the button is clicked.
Read AlsoCreating a Responsive Pet Store Landing Page using HTML & CSS.jpgCreating a Responsive Pet Store Landing Page using HTML and CSS (Source Code)

Step 2 (CSS Code):

Now, add some basic styles to the popup box. Here's a breakdown of the styles:

body

  • font-family: 'Poppins', sans-serif;: Applies the Poppins font (imported from Google Fonts) to the entire body of the page. If Poppins is unavailable, it falls back to a generic sans-serif font.
  • margin: 0; padding: 0;: Removes any default margin and padding from the body, ensuring the content fills the entire page.
  • background-color: #f0f4f8;: Sets a light grayish-blue background color for the body.
  • color: #333;: Sets the text color to a dark gray for better readability.

.notification

This class styles the notification alert box:

  • position: fixed;: Fixes the notification at a specific position on the screen, so it stays visible even when scrolling.
  • bottom: 16px; right: 16px;: Positions the notification 16px from the bottom and right edges of the viewport.
  • z-index: 50;: Ensures the notification appears above other content on the page (higher values make it more "on top").
  • display: flex;: Uses Flexbox to align the content inside the notification.
  • align-items: center; justify-content: center;: Centers the items both vertically and horizontally within the notification.
  • gap: 16px;: Adds 16px space between the message and the close button.
  • padding: 12px 20px;: Adds padding around the content inside the notification.
  • background-color: #fecaca;: Sets a soft red background color for the notification.
  • color: #991b1b;: Sets the text color to a dark red.
  • border-radius: 8px;: Rounds the corners of the notification box.
  • transition: opacity 0.5s ease-out, transform 0.5s ease-out;: Adds smooth transitions for changes in opacity and position (transform) over 0.5 seconds.
  • opacity: 1;: Sets the initial opacity of the notification to fully visible.

.message

This class styles the message inside the notification:

  • font-size: 14px;: Sets the font size of the message to 14px.
  • font-weight: 500;: Makes the message text slightly bold.
  • text-decoration: none;: Removes any default underlining from links.
  • color: inherit;: Inherits the color from the parent element (which is set to the dark red in .notification).

.message:hover

  • opacity: 0.75;: Reduces the opacity of the message when hovered, creating a subtle visual effect.

svg

  • display: block;: Ensures the SVG icon is displayed as a block-level element, which helps with layout and positioning.

.close-btn

This class styles the close button:

  • background-color: #991b1b;: Sets a dark red background color for the button.
  • color: #fecaca;: Sets the button text color to the light red background of the notification.
  • border: none;: Removes any default borders around the button.
  • padding: 6px;: Adds padding inside the button to make it larger and easier to click.
  • border-radius: 4px;: Rounds the corners of the button.
  • cursor: pointer;: Changes the cursor to a pointer when hovering over the button, indicating it is clickable.

.close-btn:hover

  • background-color: #7f1d1d;: Changes the button's background to a slightly darker red when hovered, providing a visual cue for interaction.

.icon

This class styles the SVG icon inside the close button:

  • width: 16px; height: 16px;: Sets the width and height of the icon to 16px.

.hide

This class is used to hide the notification (controlled by JavaScript):

  • opacity: 0;: Makes the notification fully transparent.
  • transform: translateX(16px);: Moves the notification 16px to the right, effectively hiding it off-screen.
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #825cff;
  color: #333;
}

.notification {
  position: fixed;
  bottom: 16px;
  right: 16px;
  margin-left: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 20px;
  background-color: #fecaca; 
  color: #991b1b; 
  border-radius: 8px;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  opacity: 1;
}

.message {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: inherit;
}

.message:hover {
  opacity: 0.75;
}

svg {
  display: block;
}

.close-btn {
  background-color: #991b1b; 
  color: #fecaca; 
  border: none;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
}

.close-btn:hover {
  background-color: #7f1d1d; 
}

.icon {
  width: 16px;
  height: 16px;
}

.hide {
  opacity: 0;
  transform: translateX(16px);
}

Step 3 (JavaScript Code):

Now, let's add the JavaScript to hide the popup when the close button is clicked. Here's a breakdown of what each part of the code does:

1. document.getElementById("close-btn").addEventListener("click", function() {...});

  • This line adds an event listener to the element with the ID close-btn (the close button).
  • The event listener listens for a "click" event, meaning it will trigger the provided function when the button is clicked.

2. const notification = document.getElementById("notification");

  • This line selects the notification element with the ID notification and stores it in the notification variable. This allows easy reference to the notification element in the subsequent lines of code.

3. notification.classList.add("hide");

  • This line adds the hide class to the notification element.
  • The hide class (defined in the CSS) sets the opacity to 0 and moves the notification off-screen using transform: translateX(16px);. This effectively hides the notification with a sliding effect.

4. setTimeout(() => { notification.style.display = "none"; }, 500);

  • setTimeout is used to delay the execution of the code inside the function by 500 milliseconds (0.5 seconds).
  • After 500 milliseconds, the notification.style.display = "none"; line sets the display style of the notification to none, completely removing it from the layout and making it invisible.
  • The delay ensures that the hide class's transition (opacity change and sliding effect) finishes before the notification is removed from the page.
document.getElementById("close-btn").addEventListener("click", function() {
  const notification = document.getElementById("notification");
  notification.classList.add("hide");
  setTimeout(() => {
    notification.style.display = "none";
  }, 500);
});

Final Output:

create-popup-alert-box-with-close-functionality-using-html-css-and-javascript.gif
Read Alsoresponsive card with glowing hover effect using html and css.pngHow to Create a Responsive Card with a Glowing Hover Effect - HTML & CSS Tutorial

Conclusion:

In this tutorial, we’ve learned how to create a popup alert box with a close button using HTML, CSS, and JavaScript. This is a simple yet effective way to display important messages or notifications to your users. By following these steps, you can easily add a popup to your website and customize it to fit your needs.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: popup, alert box, close button, javascript, create popup alert box with close functionality, popup box using html and css, javascript popup alert box, subscription notification popup with dismiss feature, simple dismissible notification banner, notification popup
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Components

Please allow ads on our site🥺