How to Create a Onload Popup with HTML, CSS and Javascrip

Create a Onload Popup with HTML, CSS and Javascript : A Beginner's Tutorial

Difficulty: Easy

Posted: Jan 15th, 2025 | By the 404Found Team

Have you ever wanted to display a popup when a webpage loads? Well, in this tutorial, we’ll teach you how to do just that using HTML, CSS, and JavaScript!

Feel Free to use are Built in Code Editor! Just make sure you use Inline code insted of Linking your files! If you don;t know how to use Inline, Check out are Tutorial Here.

What You’ll Learn:

How to create a simple onload popup.
Styling your popup to make it look nice.
How to close the popup using JavaScript.

Step 1: Setting Up the HTML Structure

The first thing we need is a simple HTML structure for our popup. It’s going to be hidden when the page loads and will appear once the page has finished loading.

Here's the basic HTML setup:

HTML Structure for Popup

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popup on Load</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="popup" id="popup">
      <div class="popup-content">
        <h2>Welcome to Our Site!</h2>
        <p>We are happy to have you here. Enjoy your visit!</p>
        <button id="close-btn">Close</button>
      </div>
    </div>

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

In the code above, we’ve created a div with the class "popup" that will be used as our popup container. Inside, we have another div for the actual content, including a heading, a paragraph, and a close button.

Step 2: Styling the Popup with CSS

Go to your styles.css file, or make on if you do have one yet.

Now, let's add some styling to make our popup look better. We will hide it initially and give it a cool design.

Here's the CSS to style the popup:

CSS for Popup Styling

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

This CSS will style the popup and center it on the screen. The background color is set to a semi-transparent black, and the popup content has a white background with some padding, rounded corners, and a box-shadow effect to give it a modern look.

Step 3: Showing the Popup on Page Load

Go to your script.js file, or make on if you do have one yet.

Next, we need to add the functionality that makes the popup appear when the page is loaded. We will use JavaScript to make this happen.

Here’s the JavaScript to show the popup:

JavaScript to Show the Popup

window.onload = function() {
  document.getElementById('popup').style.display = 'flex';
};

document.getElementById('close-btn').onclick = function() {
  document.getElementById('popup').style.display = 'none';
};

In this JavaScript, we use the window.onload event to trigger the popup when the page finishes loading. The document.getElementById('popup').style.display = 'flex' line makes the popup visible by changing its display style to "flex". The close button is set up to hide the popup again when clicked.

Step 4: How to Link the Files Together

To make sure everything works together smoothly, you need to link your HTML, CSS, and JavaScript files correctly:

Linking the CSS file: In the <head> section of your HTML, use the <link> tag to link the CSS file. This tells the browser to apply the styles you’ve defined in the external CSS file to your HTML page.
Linking the JavaScript file: At the bottom of the HTML document (just before the closing </body> tag), use the <script> tag to link the external JavaScript file. This ensures that the JavaScript is executed after the HTML is fully loaded.

Here’s what the linked files look like:

Example of Linking Files

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  
  <script src="script.js"></script>
</body>

Step 5: Full Example Code

Here’s the complete code for your popup! You can copy and paste it into your own project and customize it:

Complete Code for Onload Popup

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popup on Load</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="popup" id="popup">
      <div class="popup-content">
        <h2>Welcome to Our Site!</h2>
        <p>We are happy to have you here. Enjoy your visit!</p>
        <button id="close-btn">Close</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

With these steps, you now have a working onload popup for your website! Feel free to customize it further to suit your needs.

404Found Team

Posted: Feb 15th, 2025

At 404Found, we are committed to providing high-quality content that keeps you well-informed in the fast-paced and constantly evolving world of technology. Our goal is to ensure you stay up-to-date with the latest trends, innovations, and insights that shape the tech landscape.

SubReddit Discord