Tiny HTML5 Modal Popup In Vanilla JavaScript – Modal.js

Just another JavaScript library for creating modal popups that are fully controllable via HTML5 data attributes.

How to use it:

Create the modal window with the following HTML data attributes:

• data-modal-dismiss: open/close the modal
• data-modal-contain-tabs=”false”: enable/disable tab between input fields
• data-modal-disable-scroll=”false”: enable/disable page scroll
• data-modal-animation-duration=”300″: animation duration
• data-modal-autofocus: auto focus when the modal opens

<div class="modal-container" 
     id="modal-demo" 
     data-modal-dismiss 
     data-modal-contain-tabs="false" 
     data-modal-disable-scroll="false"
     data-modal-animation-duration="300">
  <div class="modal">
    <header class="modal-header">
      <h2>Modal Title</h2>
      <button class="modal-close" data-modal-dismiss></button>
    </header>
    <div class="modal-content">
      <p> Modal Content</p>
      <div>
        <input type="text" placeholder="Text input" data-modal-autofocus>
        <input type="text" placeholder="Text input" data-modal-autofocus>
      </div>
  </div>
</div>

Create a button to launch the modal window.

<button data-modal-open="modal-demo">Open</button>

Load the main JavaScript file modal.js to active the modal window.

<script src="dist/modal.min.js"></script>

Free feel to customize the modal window with your own CSS styles.

.modal-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0,0.8);
  visibility: hidden;
  z-index: 5000
}
.modal-container.animate { transition: visibility .3s }
.modal-container.modal-open { visibility: visible }
.modal {
  background-color: #FFF;
  border-radius: 4px;
  max-width: 600px;
  min-width: 250px;
  overflow: hidden
}
.modal.animate {
  transform: scale(0.7);
  opacity: 0;
  transition: transform 0.3s, opacity .3s
}
.modal-open .modal.animate {
  opacity: 1;
  transform: scale(1)
}
.modal-container input {
  margin-top: 10px;
  margin-bottom: 10px
}
.modal-header {
  position: relative;
  background-color: rgba(80,100,100,0.3);
  margin: 0;
  padding: 15px 40px;
  text-align: center
}
.modal-header h2 {
  margin: 0;
  color: #303030
}
.modal-close {
  background-color: transparent;
  border: none;
  cursor: pointer;
  height: 30px;
  padding: 0;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  z-index: 5001
}
.modal-close:focus { background-color: transparent }
.modal-close::before, .modal-close::after {
  background-color: #828c8c;
  content: "";
  height: 3px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 20px
}
.modal-close:hover::before, .modal-close:hover::after, .modal-close:focus::before, .modal-close:focus::after { background-color: #303030 }
.modal-close::before { transform: translate(-50%, -50%) rotate(45deg) }
.modal-close::after { transform: translate(-50%, -50%) rotate(-45deg) }
.modal-content { padding: 15px 35px }
.modal-content p { font-size: 16px }
.modal-content > div { padding: 5px 10px }