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.

 

TABLE OF CONTENTS

Download & Notes Basics & Demo How It Works
Useful Bits & Links The End

 

 

DOWNLOAD & NOTES

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

 

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.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer 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.

 

POPUP BASICS & DEMO

For you guys who just want to use this as a “plugin”, here’s how, and a quick demo.

 

HOW TO USE

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

<!-- (B) THE DEMO -->
<input type="button" onclick="popup.open('Title', 'Text')" value="Show"/>
  1. Include the CSS and Javascript in your project.
  2. Call popup.open("TITLE", "TEXT") to show the popup.
  3. Optionally, call popup.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!

 

 

SIMPLE POPUP DEMO

 

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
  pBox : null, // popup box
  pTitle : null, // popup title
  pText : null, // popup text
  pClose : null, // popup close button
  init : function () {
    // (A1) POPUP BOX
    popup.pBox = document.createElement("div");
    popup.pBox.id = "popbox";
    document.body.appendChild(popup.pBox);
   
    // (A2) TITLE
    popup.pTitle = document.createElement("h1");
    popup.pTitle.id = "poptitle";
    popup.pBox.appendChild(popup.pTitle);
    
    // (A3) TEXT
    popup.pText = document.createElement("p");
    popup.pText.id = "poptext";
    popup.pBox.appendChild(popup.pText);
    
    // (A4) CLOSE BUTTON
    popup.pClose = document.createElement("div");
    popup.pClose.id = "popclose";
    popup.pClose.innerHTML = "&#9746;";
    popup.pClose.onclick = popup.close;
    popup.pBox.appendChild(popup.pClose);
  },

  // (B) OPEN POPUP
  open : function (title, text) {
    popup.pTitle.innerHTML = title;
    popup.pText.innerHTML = text;
    popup.pBox.classList.add("open");
  },

  // (C) CLOSE POPUP
  close : function () {
    popup.pBox.classList.remove("open");
  }
};
window.addEventListener("DOMContentLoaded", popup.init);

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

  • var popup is an object that drives the mechanics behind the popup.
  • 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="popbox">
  <h1 id="poptitle">TITLE</h1>
  <p id="poptext"> TEXT</p>
  <div id="popclose">&#9746;</div>
</div>

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

  • <div id="popbox"> is the container of the entire popup box.
  • <h1 id="poptitle"> is the title of the dialog box.
  • <p id="poptext"> the text of the dialog box.
  • <div id="popclose"> the close button.

 

 

THE CSS

popup.css
/* (A) POPUP BOX */
#popbox {
  /* CENTER ON SCREEN */
  position: fixed;
  top: 40vh;
  left: 50vw;
  transform: translate(-50%);
  z-index: 999;
 
  /* DIMENSIONS & COLORS */
  width: 320px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
 
  /* HIDE BY DEFAULT */
  opacity: 0;
  visibility: hidden;
 
  /* CSS FADE ANIMATION */
  transition: opacity 0.3s;
}
 
/* SHOW POPUP BOX */
#popbox.open {
  opacity: 1;
  visibility: visible;
}

/* (B) TITLE & TEXT */
#poptitle, #poptext {
  padding: 10px; margin: 0;
}
#poptitle, #popclose {
  font-size: 28px;
}

/* (C) CLOSE BUTTON */
#popclose {
  position: absolute;
  top: 0;
  right: 5px;
  cursor: pointer;
}

Just a bunch of cosmetics. The only functional parts here are:

  • To center the popup box on the screen – #popbox { position: fixed; top: 40vh; left: 50vw; transform: translate(-50%); }
  • Hide the popup box by default – #popbox { opacity: 0; visibility: hidden; }
  • To show the popup box – #popbox { 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.

 

INFOGRAPHIC CHEATSHEET

HTML & CSS Dialog Box (Click to Enlarge)

 

LINKS & REFERENCES

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

 

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 *