Very Simple Popup In Pure HTML CSS JS (Free Download)

Welcome to a quick tutorial on how to create a simple popup with HTML, CSS, and Javascript. I am sure there are tons of popup plugins all over the Internet, but some of them depend on 3rd party frameworks and add too much loading bloat. So here it is – We will walk through a very simple no fluff popup. Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

HOW TO USE (DEMO)

popup.html

<!-- (A) CSS + JS -->
<link rel="stylesheet" href="popup.css">
<script src="popup.js"></script> 

<!-- (B) THE DEMO -->
<input type="button" onclick="pop.open('Title', 'Text')" value="Show">

Include the CSS and Javascript in your project.
Call pop.open("TITLE", "TEXT") to show the popup.
Optionally, you can manually call pop.close() to hide the popup.

That’s all. If you minify and gzip the CSS and Javascript, they will fall below 1KB – Take that, you bloated libraries!

HOW IT WORKS

Now, let us move into more details on the popup itself. This section is for those who want to “deep customize” the popup.

PART 1) THE JAVASCRIPT

popup.js

var pop = {
  // (A) ATTACH POPUP HTML
  pWrap : null,  // html popup wrapper
  pTitle : null, // html popup title
  pText : null,  // html popup text
  init : () => {
    // (A1) POPUP WRAPPER
    pop.pWrap = document.createElement("div");
    pop.pWrap.id = "popwrap";
    document.body.appendChild(pop.pWrap);

    // (A2) POPUP INNERHTML
    pop.pWrap.innerHTML =
    `<div id="popbox">
      <h2 id="poptitle"></h2>
      <p id="poptext"></p>
      <div id="popclose" onclick="pop.close()">&#10006;</div>
    </div>`;
    pop.pTitle = document.getElementById("poptitle");
    pop.pText = document.getElementById("poptext");
  },

  // (B) OPEN POPUP
  open : (title, text) => {
    pop.pTitle.innerHTML = title;
    pop.pText.innerHTML = text;
    pop.pWrap.classList.add("open");
  },

  // (C) CLOSE POPUP
  close : () => pop.pWrap.classList.remove("open")
};
window.addEventListener("DOMContentLoaded", pop.init);

Yikes, this may look pretty confusing to a beginner at first. But keep calm and look carefully. There are only 3 functions here.

init() is called as the page loads, all it does is essentially create the HTML for the popup.
open() is used to show the popup box, just provide the title and text.
close() will close the popup box.

PART 2) POPUP HTML

<div id="popwrap"><div id="popbox">
  <h2 id="poptitle">TITLE</h2>
  <p id="poptext">TEXT</p>
  <div id="popclose">&#10006;</div>
</div></div>

This is the HTML that pop.init() inserts into the <body>. It should be pretty self-explanatory:

<div id="popwrap"> the full-screen “cover” and wrapper of the popup.
<div id="popbox"> the popup box itself.
<h2 id="poptitle"> title of the dialog box.
<p id="poptext"> text of the dialog box.
<div id="popclose"> the close button.

PART 3) THE CSS

popup.css

/* (A) POPUP WRAPPER */
#popwrap {
  /* (A1) FULLSCREEN */
  position: fixed;
  top: 0; left: 0; z-index: 99;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.5);
 
  /* (A2) CENTER ON SCREEN */
  display: flex; align-items: center; justify-content: center;
 
  /* (A3) HIDDEN BY DEFAULT */
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s;
}

/* (A4) SHOW POPUP */
#popwrap.open { opacity: 1; visibility: visible; }

/* (B) POPUP BOX ITSELF */
#popbox { min-width: 320px; max-width: 600px; }

/* (C) TITLE + TEXT + CLOSE BUTTON  */
#poptitle { background: #820000; }
#poptext { background: #fff; }
#poptitle, #poptext { padding: 10px; margin: 0; }
#poptitle, #popclose { font-size: 28px; color: #fff; }
#popclose {
  position: absolute;
  top: 5px; right: 10px;
  cursor: pointer;
}

Just a bunch of cosmetics, the key mechanics are:

(A1) Let the wrapper cover fullscreen – #popwrap { position: fixed; top: 0; left: 0; z-index: 99; width: 100vw; height: 100vh; }
(A2) Center the popup box on the screen – display: flex; align-items: center; justify-content: center;
(A3) Hide the popup by default – opacity: 0; visibility: hidden;
(A4) We will use Javascript to toggle show/hide – #popwrap.open { opacity: 1; visibility: visible; }

EXTRA BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

NATIVE HTML POPUP

<dialog open>
  <p>Text.</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

Yes, there is a native HTML dialog element. But I am not sure if it is “better for SEO”, “better for programming”, or “more semantically correct”. The above “custom popup box” has worked for me for donkey years, and I don’t see merit in using <dialog>. So… You decide for yourself.

COMPATIBILITY CHECKS

Arrow Functions – CanIUse
Viewport Units (vw vh) – CanIUse
CSS Flex – CanIUse

Well-supported on all modern browsers. Will not run into compatibility issues, unless the user is still using an ancient browser.

LINKS & REFERENCES

Need more “solid” popup plugins? Check out the following lists

TUTORIAL VIDEO

INFOGRAPHIC CHEATSHEET

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!