Last updated Fri Jan 12 2024

How to Create an HTML Popup [CSS, Javascript]

Creating an effective popup form can be a game-changer for engaging your website visitors and conveying important messages.

In this tutorial, I'll walk you through the step-by-step process of building a simple and user-friendly popup using JavaScript and CSS.

Create marketing popups without coding (with built-in Shopify and Klaviyo properties)

Learn more

If you'd like to make a popup with a popup builder (so without coding), check out these guides:

How to make a simple popup with HTML

Here are the basic steps to make a simple HTML popup:

Create the HTML structure
Customize with CSS
Add Javascript interactivity

You don't need to have a website to be able to preview your work.

The final version of this popup window will look like this:

1. Create the HTML structure

Define an HTML container for the popup and include elements like content, close button, and overlay (see the code below)
Link the HTML file with your CSS file (https://www.yourwebsite.com/html/styles.css) for styling (we'll create the styling in the next step)

HTML container:

<p>Welcome to our website!</p>

<p>Sign up to receive exclusive offers:</p>

</div>

2. Customize the window with CSS:

Create a separate CSS file (styles.css) to define the visual style of your popup window.
Customize dimensions, colors, and animations to match your website's design (you can add color codes to the code below)

.popup-overlay {

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.5);

}

.popup {

font-family: Arial, sans-serif;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

}

.popup-content {

text-align: center;

}

.popup .close {

position: absolute;

top: 10px;

right: 10px;

font-size: 20px;

cursor: pointer;

color: #333;

}

.popup #emailInput {

width: 80%;

padding: 10px;

margin: 10px 0;

border: 1px solid #ddd;

border-radius: 4px;

}

.popup button {

background-color: #4caf50;

color: #fff;

padding: 10px 20px;

border: none;

border-radius: 4px;

cursor: pointer;

font-size: 16px;

}

3. Add JavaScript interactivity:

Develop the JavaScript functionality in a separate file (script.js) to control the popup's behavior.
Use event listeners to handle opening and closing the popup.

document.addEventListener('DOMContentLoaded', function () {

const popupOverlay = document.getElementById('popupOverlay');

const popup = document.getElementById('popup');

const closePopup = document.getElementById('closePopup');

const emailInput = document.getElementById('emailInput');

// Function to open the popup

function openPopup() {

popupOverlay.style.display = 'block';

}

// Function to close the popup

function closePopupFunc() {

popupOverlay.style.display = 'none';

}

// Function to submit the signup form

function submitForm() {

const email = emailInput.value;

// Add your form submission logic here

console.log(`Email submitted: ${email}`);

closePopupFunc(); // Close the popup after form submission

}

// Event listeners

// Trigger the popup to open (you can call this function on a button click or any other event)

openPopup();

// Close the popup when the close button is clicked

closePopup.addEventListener('click', closePopupFunc);

// Close the popup when clicking outside the popup content

popupOverlay.addEventListener('click', function (event) {

if (event.target === popupOverlay) {

closePopupFunc();

}

});

// You can customize and expand these functions based on your specific requirements.

});

Related resources

More useful guides on creating popup campaigns:

Oleksii Kovalenko

Oleksii Kovalenko is a digital marketing expert and a writer with a degree in international marketing. He has seven years of experience helping ecommerce store owners promote their businesses by writing detailed, in-depth guides.

Education:

Master's in International Marketing, Academy of Municipal Administration