Unimodal

Simple Vanilla Javascript Modal

Universal
Simple
Style what you want
Hash support

Get started

Include css:

This is basic styles. You can change what you want and need.

<link rel="stylesheet" href="unimodal.css">

Include script:

<script src="unimodal.min.js">

Use

HTML:

<!--
Important attributes:
  - [data-unimodal] - modal element
  - [data-unimodal-body] - modal body element
  - [data-unimodal-close] - modal close button
-->

<!--- Open Modal Button -->
<a href="#!" data-unimodal-open="simple-modal">Open Modal</a>

<!--- Modal Markup -->
<div class="unimodal" id="simple-modal" data-unimodal>
  <div class="unimodal-body" data-unimodal-body>
    <button type="button" data-unimodal-close>Close</button>
    <!--- Your Content Here -->
  </div>
</div>

<!-- If you don't need close modal after click on overlay -->
<div data-unimodal data-unimodal-static> ... </div>

Init:

const modal = new Unimodal({
  scrollWindow: false, /* enable or disable window scroll */
  hash: false, /* hash support */
  onOpen: ( modal, button ) => {
    /* ... do your staff here ... */
  },
  onClose: modal => {
    /* ... do your staff here ... */
  }
});

Public Methods:

/* Open Modal */
Unimodal.open('your-modal-id', () => {
  /* ... your callback here ... */
});

/* Close Modal */
Unimodal.close('your-modal-id', () => {
  /* ... your callback here ... */
});

/* OR */
modal.open('your-modal-id');
modal.close('your-modal-id');

/* Close Modals */
Unimodal.closeAll();

Demo

Open Modal

Open Long Modal

Custom Button

<button type='button' id='custom-button'>Custom Modal</button>

const button = document.querySelector('#custom-button');
button.addEventListener('click', e => {
  modal.open('custom-modal');
});

Recipe: Video

HTML:

<!--- Button -->
<button type='button' data-unimodal-open='modal-video'>Open Modal</button>

<!--- Modal -->
<div class='unimodal' id='modal-video' data-unimodal></div>
  <div class='unimodal-body' data-unimodal-body>
    <button type='button' data-unimodal-close>Close</button>
    <video controls>
      <source src='video.mp4' type='video/mp4' />
      Your browser does not support the video tag.
    </video>
  </div>
</div>

JavaScript:

const modal = new Unimodal({
  onOpen: ( modal, button ) => {
    if ( modal.id == 'modal-video' ) {
      const video = modal.querySelector('video');
      video.currentTime = 0;
      video.play();
    }
  },
  onClose: modal => {
    if ( modal.id == 'modal-video' ) {
      const video = modal.querySelector('video');
      video.pause();
    }
  }
});

Demo:

Recipe: YouTube Video

HTML:

<!--- Button -->
<button type='button' data-unimodal-open='modal-youtube' data-youtube-id='4u6bWs-ZG0o'></button>

<!--- Modal -->
<div class='unimodal' id='modal-youtube' data-unimodal></div>
  <div class='unimodal-body' data-unimodal-body>
    <button type='button' data-unimodal-close>Close</button>
    <div id='youtube-player'></div>
  </div>
</div>

<!--- Load YouTube API -->
<script src='//www.youtube.com/iframe_api'></script>

JavaScript:

/* Create Player */
let player;
let playerReady = false;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('youtube-player', {
    videoId: '',
    events: {
      onReady: () => {
        playerReady = true;
      }
    }
  });
}

/* Modal */
const modal = new Unimodal({
  onOpen: ( modal, button ) => {
    if ( modal.id == 'modal-youtube' ) {
      const videoId = button.getAttribute('data-youtube-id');

      const check = setInterval(() => {
        if ( playerReady ) {
          clearInterval(check);
          player.loadVideoById(videoId);
          player.playVideo();
        }
      }, 100);
    }
  },
  onClose: modal => {
    if ( modal.id == 'modal-youtube' ) {
      player.stopVideo();
    }
  }
});

Demo:

Recipe: YouTube Video without API

HTML:

<!--- Button -->
<button type='button' data-unimodal-open='modal-youtube2' data-youtube-src='https://www.youtube.com/embed/-Ot0vHUyEpw'></button>

<!--- Modal -->
<div class='unimodal' id='modal-youtube2' data-unimodal></div>
  <div class='unimodal-body' data-unimodal-body>
    <button type='button' data-unimodal-close>Close</button>
    <iframe src=''></div>
  </div>
</div>

JavaScript:

/* Modal */
const modal = new Unimodal({
  onOpen: ( modal, button ) => {
    if ( modal.id == 'modal-youtube2' ) {
      const videoSrc = button.getAttribute('data-youtube-src');

      modal.querySelector('iframe').setAttribute('src', videoSrc);
    }
  },
  onClose: modal => {
    if ( modal.id == 'modal-youtube2' ) {
      modal.querySelector('iframe').setAttribute('src', '');
    }
  }
});

Demo: