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.

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Demo How It Works Useful Bits & Links
Tutorial Video The End

 

 

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"/>

  1. Include the CSS and Javascript in your project.
  2. Call pop.open("TITLE", "TEXT") to show the popup.
  3. Optionally, 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.

 

THE JAVASCRIPT

popup.js
var pop = {
  // (A) ATTACH POPUP HTML
  pWrap : null, // HTML POPUP WRAPPER
  pTitle : null, // HTML POPUP TITLE
  ptxt : null, // HTML POPUP TEXT
  init : () => {
    // (A1) POPUP WRAPPER
    pop.pWrap = document.createElement("div");
    pop.pWrap.id = "popwrap";
    document.body.appendChild(pop.pWrap);

    // (A2) POPUP BOX
    let pBox = document.createElement("div");
    pBox.id = "popbox";
    pop.pWrap.appendChild(pBox);
 
    // (A3) TITLE
    pop.pTitle = document.createElement("h1");
    pop.pTitle.id = "poptitle";
    pBox.appendChild(pop.pTitle);
    
    // (A4) TEXT
    pop.pText = document.createElement("p");
    pop.pText.id = "poptext";
    pBox.appendChild(pop.pText);
    
    // (A5) CLOSE BUTTON
    let pClose = document.createElement("div");
    pClose.id = "popclose";
    pClose.innerHTML = "&#9746;";
    pClose.onclick = pop.close;
    pBox.appendChild(pClose);
  },

  // (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. We will go through that below.
  • open() is used to show the popup box, just provide the title and text.
  • close() will close the popup box.

 

 

POPUP HTML

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

This is the HTML that pop.init() will generate and insert 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.
  • <h1 id="poptitle"> title of the dialog box.
  • <p id="poptext"> text of the dialog box.
  • <div id="popclose"> the close button.

 

 

THE CSS

popup.css
/* (A) POPUP WRAPPER */
#popwrap {
  /* (A1) FULLSCREEN COVER*/
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.5);

  /* (A2) CENTER BOX ON PAGE */
  display: flex;
  justify-content: center;
  align-items: 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 */
#popbox {
  position: relative;
  box-sizing: border-box;
  min-width: 320px;
}

/* (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: 0; right: 5px;
  cursor: pointer;
}

Just a bunch of cosmetics, the key mechanics are:

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

 

 

USEFUL 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.

 

COMPATIBILITY CHECKS

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

HTML & CSS Dialog Box (Click to Enlarge)

 

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!

Leave a Comment

Your email address will not be published. Required fields are marked *