I stumbled upon a query somewhere about needing guidance to create a fancy, media-rich pop-up modal. On the same question page, I saw people recommending jQuery plugins and JavaScript libraries and stuff that seems too big to achieve a simple fancy pop-up box.

Note: This article is about pop-ups or modals or boxes, not pop-up windows.

So, I thought why not quickly write about how I do pop-up boxes on my sites. And here I am!

Before going further, I want to share my philosophy of treating the markup. I prefer:

  • Keeping the regular HTML elements and dynamic elements separate,
  • Things that are of no on-page SEO importance should be created and/or destroyed dynamically.

We are going to create the pop-up box dyanamically, with the least possible JavaScript required. Let’s get started.

CSS

First off, we’ll be writing some CSS to give our to-be-modal-box a structure, and some makeover. Our pop-up box should appear in the absolute center of the window, and below is the CSS to make it like so with little more added styles.

.js-modal {
  /* Take the box out of the flow, so that it could look like a modal box */
  position: absolute;

  /* Avoid the awkwardly stretchy box on bigger screens */
  max-width: 450px;

  /* Aligning it to the absolute center of the page */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Some cosmetics */
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .1);
}

.js-modal-hidden {
  display: none;
}

/* Make the media inside the box adapt the width of the parent */
.js-modal img,
.js-modal iframe,
.js-modal video {
  max-width: 100%;
}

/* Make the inner element relatively-positioned to contain the close button */
.js-modal-inner {
  position: relative;
  padding: 10px;
}

/* Close button */
.js-modal-close {
  font-size: 10px;

  /* Take it out of the flow, and align to the top-left corner */
  position: absolute;
  top: -10px;
  right: -10px;

  /* Size it up */
  width: 24px;
  height: 24px;

  /* Text-alignment */
  text-align: center;

  /* Cosmetics */
  color: #eee;
  border-width: 0;
  border-radius: 100%;
  background-color: black;
}

The above CSS is written just to give the skeleton and skin to our modal. We’ll be using it further in the JavaScript to inject the pop-up dynamically in the page markup. Check out the demonstration page to see how it looks like without functionality.

See the fancy version of our modal (not functional).

Now that we have styled our pop-up div, it’s time to hide it, as we have to make it appear on the start with the help of JavaScript.

JavaScript

Now comes the JavaScript part, obviously I’m not going to make use of any JavaScript library like jQuery, and will just be using vanilla JS (ECMA2015).

We’ll be writing a JavaScript function to create an HTML element, and then add styles and contents to it. This HTML element would act as our pop-up box.

I’ve used Document.createElement to create a new element, and provided it the dynamic content, structure, styles, class etc.

The styles here comes from the CSS snippet I shared in the section above.

Interesting thing to notice here is that we will be supplying the content dynamically to the pop-up box. The below function carries only one parameter, which will solely act as the content of our pop-up box.

<script>
let createModal = (modalContent) => {
  // Definitions
  let modal = document.createElement("div"),
      modalStyle = document.createElement("style"),
      modalCSS = '.js-modal{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, .1); max-width: 650px; border-radius: 5px; } .js-modal img, .js-modal iframe, .js-modal video{ max-width: 100%; } .js-modal-inner{ position: relative; padding: 10px; } .js-modal-close{ position: absolute; top: -10px; right: -10px; background-color: black; color: #eee; border-width: 0; font-size: 10px; height: 24px; width: 24px; border-radius: 100%; text-align: center; }',
      modalClose = '<button class="js-modal-close" id="js_modal_close">X</button>',
      theBody = document.getElementsByTagName('body')[0],
      theHead = document.getElementsByTagName('head')[0];

  // Add content and attributes to the modal
  modal.setAttribute("class", "js-modal");
  modal.innerHTML = '<div class="js-modal-inner">' + modalContent + modalClose + '</div>';
  theBody.appendChild(modal);

  modalClose = document.querySelector("#js_modal_close");

  // Add the modal styles dynamically
  if(modalStyle.styleSheet){
      modalStyle.styleSheet.cssText = modalCSS;
  } else {
      modalStyle.appendChild(document.createTextNode(modalCSS));
  }
  theHead.appendChild(modalStyle);

  // Close the modal on button-click
  if(modalClose) {
    modalClose.addEventListener('click', function() {
      modal.remove();
      modalStyle.remove();
    });
  }
}
</script>

Now, proceed like below to get a closable pop-up box when window starts to load:

// Show it up when loading starts
window.addEventListener('load', function() {
  /* Remember to escape the characters to their respective valid
     HTML entities, for eg. ' will become \' */
  createModal('A sweet, little, simple vanilla JavaScript Pop-up box.');
});

See the Demo

That was it. I hope it was of some help. I’ll post updates as soon as I add improvements and extensibility to it. Please feel free to share this post, and your views through comments and social media. Cheers!

Read further