{"id":10452,"date":"2023-12-22T11:25:18","date_gmt":"2023-12-22T11:25:18","guid":{"rendered":"https:\/\/www.picreel.com\/blog\/?p=10452"},"modified":"2025-10-14T05:47:32","modified_gmt":"2025-10-14T05:47:32","slug":"html-popup","status":"publish","type":"post","link":"https:\/\/www.picreel.com\/blog\/html-popup\/","title":{"rendered":"HTML Popup Message: Quick Methods With Codes & Steps"},"content":{"rendered":"

Finding it challenging to capture your website visitors\u2019 attention and keep them engaged? The good news is that I have found a solution \u2013 HTML popups. I\u2019ve been using them for years, and they have worked for me. But lately, I wanted them to be more out-of-the-box and interactive.<\/span><\/p>\n

So, I combined HTML, CSS, and JavaScript, and the results were amazing. I was amazed by how engaging and interactive my popups started looking. The best part? They also helped me grow my email list, achieve an average conversion of around 4%<\/span>,<\/span> and boost click-through rates.<\/span><\/p>\n

But hey, not everyone is a coder, right? If you are one of them, consider switching to a popup builder like Picreel. It is a much simpler and faster option. You can create popups without all the hassles and embed them using a ready-made HTML code.\u00a0<\/span><\/p>\n

To help you make an informed choice, I\u2019ve thoroughly explored both methods of creating popups: HTML\/CSS\/Javascript and the Picreel popup builder.<\/span><\/p>\n

<\/span>Method 1: Using HTML\/CSS\/JavaScript<\/span><\/h2>\n

Here are the steps to build an HTML popup page using HTML, CSS, and JavaScript:<\/p>\n

    \n
  • Building the HTML structure<\/li>\n
  • Customizing the popup with CSS<\/li>\n
  • Making the popup interactive with JavaScript<\/li>\n<\/ul>\n

    A preview of the HTML popup window after running all the codes:<\/p>\n

    \"HTML<\/p>\n

    Image Source: Picreel<\/p>\n

    1. Building the HTML Structure<\/h3>\n

    To begin with, create the structure of the HTML popup box. Here, you can include the HTML popup message, title, overlay, and close button. Now, as we\u2019ll be using CSS to further style the popup, you must link your HTML and CSS files.<\/p>\n

    HTML Code (Popup Structure)<\/strong><\/p>\n

    \n

    <!DOCTYPE html><\/span><\/p>\n

    <html lang=”en”><\/span><\/p>\n

    <head><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0<meta charset=”UTF-8″><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0<meta name=”viewport” content=”width=device-width, initial-scale=1.0″><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0<title>Popup Example<\/title><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0<link rel=”stylesheet” href=”styles.css”><\/span><\/p>\n

    <\/head><\/span><\/p>\n

    <body><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0<button id=”openPopup”>Open Popup<\/button><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0<div id=”popup” class=”hidden”><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=”popup-content”><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span id=”closePopup” class=”close”>&times;<\/span><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2>Welcome to Our Website!<\/h2><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>Subscribe to our newsletter for updates.<\/p><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button>Subscribe<\/button><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0<\/div><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0<script src=”script.js”><\/script><\/span><\/p>\n

    <\/body><\/span><\/p>\n

    <\/html><\/span><\/p>\n<\/div>\n

    2. Customizing the Popup With CSS<\/h3>\n

    Next, create a CSS file to define the visuals of your HTML popup alert. Once you have a separate CSS file, start customizing the popup. You can add codes for colors, animations, and dimensions as per your website\u2019s design.<\/p>\n

    CSS Code (Popup Customization)<\/strong><\/p>\n

    \n

    \/* styles.css *\/<\/span><\/p>\n

    body {<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0font-family: Arial, sans-serif;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0margin: 0;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0padding: 0;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0display: flex;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0justify-content: center;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0align-items: center;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0height: 100vh;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0background-color: #f4f4f9;<\/span><\/p>\n

    }<\/span><\/p>\n

    button {<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0padding: 10px 20px;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0background-color: #007bff;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0color: white;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0border: none;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0border-radius: 5px;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0cursor: pointer;<\/span><\/p>\n

    }<\/span><\/p>\n

    button:hover {<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0background-color: #0056b3;<\/span><\/p>\n

    }<\/span><\/p>\n

    #popup {<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0position: fixed;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0top: 0;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0left: 0;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0width: 100%;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0height: 100%;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0background-color: rgba(0, 0, 0, 0.5);<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0display: flex;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0justify-content: center;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0align-items: center;<\/span><\/p>\n

    }<\/span><\/p>\n

    .popup-content {<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0background-color: white;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0padding: 20px;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0border-radius: 10px;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0width: 300px;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0text-align: center;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);<\/span><\/p>\n

    }<\/span><\/p>\n

    .hidden {<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0display: none;<\/span><\/p>\n

    }<\/span><\/p>\n

    .close {<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0position: absolute;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0top: 10px;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0right: 15px;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0font-size: 18px;<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0cursor: pointer;<\/span><\/p>\n

    }<\/span><\/p>\n<\/div>\n

    3. Making the Popup Interactive With JavaScript<\/h3>\n

    Now, it\u2019s time to create a JavaScript file to define how your popup will interact with visitors on your website. You can use the event listeners function to control the opening and closing of the HTML\u00a0popup form<\/a>.<\/p>\n

    JavaScript Code (Popup Interactivity)<\/strong><\/p>\n

    \n

    \/\/ script.js<\/span><\/p>\n

    document.getElementById(“openPopup”).addEventListener(“click”, function() {<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0document.getElementById(“popup”).classList.remove(“hidden”);<\/span><\/p>\n

    });<\/span><\/p>\n

    document.getElementById(“closePopup”).addEventListener(“click”, function() {<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0document.getElementById(“popup”).classList.add(“hidden”);<\/span><\/p>\n

    });<\/span><\/p>\n

    window.addEventListener(“click”, function(event) {<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0const popup = document.getElementById(“popup”);<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0if (event.target === popup) {<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0popup.classList.add(“hidden”);<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0}<\/span><\/p>\n

    });<\/span><\/p>\n<\/div>\n

    Note: These codes are just for reference.<\/em><\/p>\n

    <\/span>Method 2: Using Picreel Popup Builder<\/span><\/h2>\n

    If you want to bypass coding, <\/span>Picreel<\/span><\/a> can help you create a popup in minutes without writing a single line of code.\u00a0\u00a0<\/span>It works across website platforms, offers flexible customization, and integrates with CRM tools for automated email marketing.<\/span><\/p>\n

    Let\u2019s quickly see how to create popup with Picreel in minutes:<\/span><\/p>\n