Minimal Modal Component In Vanilla JavaScript – Mimodal

Mimodal is a vanilla JavaScript plugin helps you create multi-purpose modal windows with minimal effort.

Basic usage:

Download and the insert the stylesheet modal.css & javascript modal.js into your html page.

<link rel="stylesheet" href="dist/modal.css">
<script src="dist/modal.js"></script>

Create a basic modal window.

<button class="default" 
        data-toggle="modal" 
        data-modal-style="simple" 
        data-modal-content="This is as simple as it gets.">
        Click me
</button>

Create a modal window with a fade animation.

<button class="default" 
        data-toggle="modal" 
        data-modal-style="fade" 
        data-modal-content="I just fade in.">
        Click me
</button>

Create a modal window that auto dismiss after 3 seconds.

<button class="default" 
        data-toggle="modal" 
        data-modal-style="fade" 
        data-modal-timeout="3000"
        data-modal-content="Consider yourself warned.">
        Click me
</button>

Create a modal dialog with confirm & cancel buttons.

<button class="default" 
        data-toggle="dialog" 
        data-modal-content="Are you sure you want to do this?">
        Click me
</button>

Mimodal’s real power is in its extensibility. By passing a configuration option your modals can do whatever you need them to do. Here’s an example that helps you create a draggable modal window.

<button class="default" id="draggable">Click me</button>

((window.gitter = {}).chat = {}).options = {
  room: 'draggable/mimodal'
};
var getScripts = function() {
  var scripts = [];
  var extScripts = [
    '//sidecar.gitter.im/dist/sidecar.v1.js'
  ];
  var i = (extScripts.length - 1);
  function readyState() {
    var script = this;
    if (!script.readyState || script.readyState === 'loaded' || script.readyState === 'complete') {
      script.onload = script.onreadystatechange = null;
      i--;
      if (i === -1) {
        // remove script after added
        for (i = scripts.length - 1; i >= 0; i--) {
          scripts[i].remove();
        }
      } else {
        getScript(i);
      }
    }
  }
  function getScript(i) {
    var script = document.createElement('script');
    script.appendChild(document.createTextNode(''));
    script.setAttribute('src', extScripts[i]);
    script.setAttribute('type', 'text/javascript');
    script.async = true;
    // Attach handlers for all browsers
    script.onload = script.onreadystatechange = readyState;
    scripts.push(script);
    document.body.appendChild(script);
  }
  // if (isSite) {
  getScript(i);
  // }
};
getScripts();
var buttons = document.getElementsByTagName('button');
var buttonCallbacks = {
  simpleWarning: function() {
    var modal = document.querySelector('.mimodal'),
      timerContainer = document.createElement('h1'),
      timer = 3;
    modal.appendChild(timerContainer);
    timerContainer.innerHTML = timer;
    var countDown = function countDown() {
      timerContainer.innerHTML = String(timer--);
      if (timer === 0) {
        clearInterval(countdownInterval);
      }
    };
    var countdownInterval = setInterval(countDown, 1000);
    countDown();
  },
  draggable: function(){
    var modalOptions = {
      modalHeader: 'I\'m Draggable',
      modalContent: 'This modal is draggable, try dragging from the move icon in the control bar or from the borders of the modal.',
      draggable: true
    };
    window.mimodal.dialog(modalOptions);
  }
};
for (var i = 0; i < buttons.length; i++) {
  var callback = buttonCallbacks[buttons[i].id];
  if (callback) {
    buttons[i].addEventListener('click', callback);
  }
}