Mini Modal Popup with Vanilla JavaScript

Preview:

Description:

A plain Vanilla JavaScript implementation of  CSS3 powered animated modal popup that supports any elements such as text, images, iframes, etc.

How to use it:

Load the vanilla modal script in the web page.

<script src="vanilla-modal.js"></script>

Create the template for the modal.

<div class="modal">
  <div class="modal-inner"> <a rel="modal:close">&times;</a>
    <div class="modal-content"></div>
  </div>
</div>

Embed your modal content into a container element.

<div id="modal-demo" style="display:none">
  <img src="1.jpg" width="400" height="300">
</div>

Create a link to trigger the modal.

<a href="#modal-demo" rel="modal:open">Open</a>

Style the modal in the CSS.

.modal { display: none; }
.vanilla-modal .modal {
  display: block;
  position: fixed;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: -1;
  opacity: 0;
  font-size: 0;
  transition: opacity 0.2s, z-index 0s 0.2s;
  text-align: center;
  overflow: hidden;
  overflow-y: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.vanilla-modal .modal > * {
  display: inline-block;
  white-space: normal;
  vertical-align: middle;
  text-align: left;
}
.vanilla-modal .modal:before {
  display: inline-block;
  overflow: hidden;
  width: 0;
  height: 100%;
  vertical-align: middle;
  content: "";
}
.vanilla-modal.modal-visible .modal {
  z-index: 99;
  opacity: 1;
  transition: opacity 0.2s;
}
.modal-inner {
  position: relative;
  overflow: hidden;
  max-width: 90%;
  max-height: 90%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  z-index: -1;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s, transform 0.2s, z-index 0s 0.2s;
}
.modal-visible .modal-inner {
  z-index: 100;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.2s, transform 0.2s;
}
a[rel="modal:close"] {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  background: #fff;
  box-shadow: -1px 1px 2px rgba(0,0,0,0.2);
}

Changelog:

v1.6.5 (08/07/2017)

• Move this.current error check after this.current has been redefined in open, and fix the check to ensure the element exists.