Simple Modal

Simple Modal Crafted With VanillaJS.

Demo

Demo

Getting Started

Install

With CDN.

Production

// CSS
https://cdn.rawgit.com/tutorjs/simple-modal/c5274140/src/css/simple-modal.css

// Javascript
https://cdn.rawgit.com/tutorjs/simple-modal/c5274140/src/js/simple-modal.js

Development

// CSS
https://rawgit.com/tutorjs/simple-modal/master/src/css/simple-modal.css

// Javascript
https://rawgit.com/tutorjs/simple-modal/master/src/js/simple-modal.js

HTML

  // Button Trigger
  <button class="your-trigger-selector">Show Modal</button>

  // Modal
  <div class="your-modal-selector">
    <div class="your-modal-content-selector">
      <h1> Hello World </h1>
    </div>
  </div>

Javascript

  new SimpleModal({
    modal: '.your-modal-selector', // root class selector
    content: '.your-modal-content-selector', // children of modal
    trigger: '.your-trigger-selector', // button action
    width: 800, // optional (default 400px)
    background: '#f2f2f2', // optional (default #fff)
  })

Thanks.