Automatic Popup Window in HTML, CSS & JavaScript

Today in this article you will know how to create Automatic Popup Window using HTML CSS and JavaScript. I have shared many tutorials before to create Automatic Popup box. But this Automatic Pop-Up Javascript is very simple. If you are a beginner then you can easily understand how I made this project (Automatic Popup Window using HTML & CSS).

HTML Automatic Popup windows are a versatile tool in web development, allowing developers to display additional content or notifications without taking users away from the current page.

While traditional popups often require user interaction, automatic popup windows can be triggered without any explicit action from the user.

In this article, we’ll explore how to create automatic popup windows using HTML, CSS, and JavaScript.

# Table of Contents

Automatic Popup in HTML, CSS & JavaScript

An automatic popup in the context of HTML, CSS, and JavaScript typically refers to a user interface element that appears on a web page without requiring direct user interaction.

Unlike traditional popups that are triggered by actions like clicks or mouse hover, automatic popups are displayed based on predefined conditions, such as a time delay or certain events.

See the Pen Untitled by Shantanu Jana (@Shantanu-Jana-the-encoder) on CodePen.

This project (automatic pop up window in Javascript) is very simple. Here I have created a box that will open automatically. Then there is a cancel button by which you can cancel the popup.

Automatic Popup Window in HTML

Below is the code to create the structure of Automatic Popup Window. A basic HTML structure includes a container for the popup and its content. This container is initially hidden. Content within the popup can vary, ranging from informative messages to forms or calls to action.

Copy Text

<!-- The container for the popup -->
<div class="popup">
    
    <!-- Button to close the popup -->
    <button id="close">×</button>
    
    <!-- Title of the popup -->
    <h2>This Is The Title</h2>
    
    <!-- Content of the popup (in this case, a paragraph) -->
    <p>
        Lorem, ipsum dolor...
    </p>
    
    <!-- Link/button for an action in the popup -->
    <a href="#">Let's Go</a>

</div>

Automatic Popup CSS Code

Very little css is used for this Javascript Automatic Popup Window. The CSS styles define the appearance and positioning of the popup. This includes settings such as the position (e.g., fixed or absolute), size, colors, and any additional styling for the content and close button.

Copy Text

/* Resetting padding and margin for all elements, including before and after pseudo-elements */
*,
*:before,
*:after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Setting background color for the body */
body {
    background-color: #0f72e5;
}

/* Styling for the popup container */
.popup {
    background-color: #ffffff;   /* Background color for the popup */
    width: 450px;                /* Width of the popup */
    padding: 30px 40px;          /* Padding for the content inside the popup */
    position: absolute;          /* Positioning the popup absolutely */
    transform: translate(-50%, -50%); /* Centering the popup using transform */
    left: 50%;                   /* Centering the popup horizontally */
    top: 50%;                    /* Centering the popup vertically */
    border-radius: 8px;          /* Adding border-radius for rounded corners */
    font-family: "Poppins", sans-serif; /* Setting the font family */
    display: none;               /* Initially hiding the popup */
    text-align: center;          /* Centering text inside the popup */
}

/* Styling for the close button inside the popup */
.popup button {
    display: block;              /* Making the button a block element */
    margin: 0 0 20px auto;       /* Setting margin for proper positioning */
    background-color: transparent; /* Transparent background for the button */
    font-size: 30px;             /* Font size of the button */
    color: #c5c5c5;              /* Text color of the button */
    border: none;                /* Removing border from the button */
    outline: none;               /* Removing outline styles */
    cursor: pointer;             /* Adding a pointer cursor for interaction */
}

/* Styling for paragraphs inside the popup */
.popup p {
    font-size: 14px;             /* Font size of paragraphs */
    text-align: justify;         /* Justifying the text */
    margin: 20px 0;               /* Setting top and bottom margin for paragraphs */
    line-height: 25px;           /* Line height for better readability */
}

/* Styling for links inside the popup */
a {
    display: block;              /* Making the link a block element */
    width: 150px;                /* Setting a specific width for the link */
    position: relative;          /* Positioning the link relative to its normal position */
    margin: 10px auto;           /* Setting margin for proper positioning */
    text-align: center;          /* Centering text inside the link */
    background-color: #0f72e5;   /* Background color for the link */
    color: #ffffff;              /* Text color of the link */
    text-decoration: none;       /* Removing default underline */
    padding: 5px 0;              /* Padding for the link */
}

Automatic Popup Window in JavaScript

JavaScript is used to control the behavior of the automatic popup. This involves creating functions to open and close the popup, as well as any additional logic such as a time delay for the popup to appear.

I have explained well the JavaScript used for this Automatic Popup box in HTML. Hope you don’t have any problems.

Copy Text

// Event listener for the 'load' event on the window
window.addEventListener("load", function(){
    
    // Using setTimeout to delay the execution of the open function
    setTimeout(
        // Anonymous function to open the popup
        function open(event){
            // Selecting the popup element and setting its display property to "block"
            document.querySelector(".popup").style.display = "block";
        },
        1000 // Delay of 1000 milliseconds (1 second) before executing the open function
    )
});

// Adding a click event listener to the element with the ID 'close'
document.querySelector("#close").addEventListener("click", function(){
    // Selecting the popup element and setting its display property to "none" to close the popup
    document.querySelector(".popup").style.display = "none";
});

Automatic popups are often used for purposes such as displaying announcements, promoting special offers, or capturing user attention for specific actions.

Hope you like this automatic popup box in HTML. It is a simple design, you can change it according to your needs.

Show Popup Automatically After Page Load Using Javascript

You can use JavaScript to show a popup automatically after a page has loaded by using the window.onload event or the DOMContentLoaded event. Here’s an example using the window.onload event:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Popup Example</title>
<style>
/* Add some basic styles for the popup */
#popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>

<!– Popup HTML –>
<div id=”popup”>
<p>This is a popup!</p>
<button onclick=”closePopup()”>Close</button>
</div>

// Function to close the popup
function closePopup() {
document.getElementById(‘popup’).style.display = ‘none’;
}

// Execute the showPopup function after the page has loaded
window.onload = function () {
showPopup();
};
</script>

</body>
</html>

In this Popup Automatically After Page Load example, the showPopup function sets the display property of the popup element to 'block', making it visible. The closePopup function sets the display property to 'none', hiding the popup. The window.onload event is used to trigger the showPopup function after the entire page, including its dependencies, has finished loading.

How to Create Simple Automatic Popup Window

To create a simple automatic popup window in HTML, you can use a combination of HTML, CSS, and JavaScript. Here’s a basic example:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Automatic Popup Window</title>
<style>
/* Style for the popup */
#popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
}

/* Style for the overlay */
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
</style>
</head>
<body>

<!– Trigger button –>
<button onclick=”showPopup()”>Open Popup</button>

<!– Popup content –>
<div id=”popup”>
<p>This is a simple popup window.</p>
<button onclick=”hidePopup()”>Close</button>
</div>

<!– Overlay to cover the background when popup is displayed –>
<div id=”overlay”></div>

// Function to hide the popup
function hidePopup() {
document.getElementById(‘popup’).style.display = ‘none’;
document.getElementById(‘overlay’).style.display = ‘none’;
}

// Automatically show the popup after a delay (e.g., 3 seconds)
setTimeout(showPopup, 3000);
</script>

</body>
</html>

In this example, the popup is initially hidden with display: none. When the “Open Popup” button is clicked, the showPopup() function is called, which sets the display property to block for both the popup and the overlay. The hidePopup() function does the opposite, hiding the popup and overlay.

Automatic Popup in HTML, CSS & JavaScript

Automatic Popup Window in HTML

Automatic Popup CSS Code

Automatic Popup Window in JavaScript

Show Popup Automatically After Page Load Using Javascript

How to Create Simple Automatic Popup Window

Leave a Comment Cancel reply