ApocModal

Install

yarn add apoc-modal
npm i apoc-modal

Demo

https://nju33.github.io/apoc-modal/

Usage

<!-- Elements that catch events -->
<button id="trigger">...</button>

<!--
  Put the modal element.
  Specify `width`, `height` and `display:none` in CSS.
-->
<div id="modal" style="width:300px;height:250px;display:none">...</div>

<!-- When reading by itself -->
<script src="/path/tp/apoc-modal.js"></script>

// es
import ApocModal from 'apoc-modal';

const modal = new ApocModal(
  document.getElementById('modal'),
  {
    // options

    // default
    type: ApocModal.types.SLIDE_UP,
    // There are other types like this
    // - 'simple',
    // - 'slide-up',
    // - 'slide-bottom',
    // - 'slide-left',
    // - 'slide-right',
    // - 'spin-reverse'
    // - 'spin'
    // - 'flip'
    // - 'flip-x'
    // - 'peek'
    // - 'focus'

    bottom: '50%',
    right: '50%',

    // The `transition-timing-function` value of css attached
    // to all relevant elements
    // default (easeInOutQuad)
    // ref: http://easings.net/
    transitionTimingFunction: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',

    // The `transition-duration` value of css attached
    // to all relevant elements
    // default
    transitionDuration: '.2s',

    // Wall background color
    // default
    wallBackgroundColor: 'rgba(0,0,0,.3)'
  }
);

document.getElementById('trigger').addEventListener('click', () => {
  if (modal.isOpen()) {
    modal.close();
  } else {
    modal.open();
  }
});

setTimeout(() => {
  // Delete events
  modal.teardown();
}, 999999)

LICENSE

The MIT License (MIT)

Copyright (c) 2018 nju33 nju33.ki@gmail.com