Tiny Responsive Modal Window In Vanilla JavaScript

Preview:

Description:

rv-vanilla-modal is a small, responsive modal module made with CSS/CSS3 and vanilla JavaScript.

How to use it:

Load the rv-vanilla-modal.js script in your web page.

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

Create a button to toggle the modal.

<button data-rv-vanilla-modal="#targer-modal">Show modal</button>

Create the main content for the modal. Make sure the ID match the data-rv-vanilla-modal attribute.

<div id="target-modal" class="rv-vanilla-modal">
  <div class="rv-vanilla-modal-header group">
    <button class="rv-vanilla-modal-close"><span class="text">×</span></button>
    <h2 class="rv-vanilla-modal-title">Modal Title</h2>
  </div>
  <div class="rv-vanilla-modal-body">
    <p>Modal Content</p>
  </div>
</div>

Enable the modal.

document.addEventListener('DOMContentLoaded', function() {
  /* global RvVanillaModal */
  'use strict';
  var modal = new RvVanillaModal({
      showOverlay: true
  });
  // each method
  modal.each(function(element) {
     var target = element.getAttribute('data-rv-vanilla-modal');
     var targetElement = document.querySelector(target);
     var closeBtn = targetElement.querySelector(modal.settings.closeSelector);
     // close click listerner
     closeBtn.addEventListener('click', function(event) {
      event.preventDefault();
      modal.close(targetElement);
     });
     // open click listerner
     element.addEventListener('click', function(event) {
      event.preventDefault();
      modal.open(targetElement);
     });
  });
}, false);

The sample CSS to style the modal.

.rv-vanilla-modal {
  position: absolute;
  top: -100%;
  left: 50%;
  width: 45%;
  min-height: 300px;
  margin: -300px 0 0 -22.5%;
  background: #fff;
  z-index: 10;
  -webkit-transition: .3s all ease-out;
  transition: .3s all ease-out;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,.3);
  box-shadow: 0 0 6px 0 rgba(0,0,0,.3)
}
.rv-vanilla-modal-is-open { top: 50% }
.rv-vanilla-modal-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  display: none;
  -webkit-transition: .4s opacity linear;
  transition: .4s opacity linear
}
.rv-vanilla-modal-overlay.is-shown {
  opacity: 1;
  display: block
}
.rv-vanilla-modal-header {
  padding: 20px;
  background: #3CB3E7;
  border-radius: 4px 4px 0 0
}
.rv-vanilla-modal-body {
  padding: 25px 20px 20px;
  overflow: auto;
  color: #555
}
.rv-vanilla-modal-body p {
  line-height: 150%;
  margin: 0 0 1em
}
.rv-vanilla-modal-title {
  color: #fff;
  margin: 0;
  font-size: 18px;
  font-weight: 300
}
.rv-vanilla-modal-close {
  color: #1a9dd6;
  font-size: 16px;
  float: right;
  display: inline-block;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(255,255,255,.4);
  -webkit-transition: all .2s linear;
  transition: all .2s linear
}
.rv-vanilla-modal-close .text {
  position: relative;
  top: -1px
}
.rv-vanilla-modal-close:hover {
  color: #1996cd;
  background: rgba(255,255,255,.5)
}
.hidden {
  display: none!important;
  visibility: hidden
}
.group:after,
.group:before {
  content: "";
  display: table
}
.group:after { clear: both }
.centered { text-align: center }