Moodal

A pure JavaScript library for modal dialog.

Get Started

1. Install

Install from NPM

npm install moodal --save
# or using yarn
yarn add moodal

// import Moodal js
import Moodal from 'moodal';

// import required style
import 'moodal/lib/css/moodal-core.css';

Use CDN

<script
  src="https://unpkg.com/moodal/lib/standalone/moodal.min.js"
  defer
></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/moodal/lib/css/moodal-core.css"
/>

Use ES modules in browser.

<script type="module" src="https://unpkg.com/moodal/lib/esm/index.mjs"></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/moodal/lib/css/moodal-core.css"
/>

2. Add markup

• [data-moodal-container] element is requied. And this shoud be left empty. (will be rewrited innerHTML)
• [data-moodal-close] elements can be anywhere. The modal is close on it clicked.

<div class="c-moodal" tabindex="-1" aria-hidden="true">
  <div class="c-moodal__bg"></div>
  <div class="c-moodal__loader">...Loading</div>
  <div class="c-moodal__container">
    <!-- close modal on `data-moodal-close` element clicked -->
    <div class="c-moodal__overlay" data-moodal-close></div>
    <div class="c-moodal__inner">
      <div class="c-moodal__body">
        <button class="c-moodal__close" type="button" data-moodal-close>
          Close
        </button>
        <div
          class="c-moodal__content"
          role="dialog"
          aria-modal="true"
          data-moodal-container
        >
          <!-- Will be appended content here -->
        </div>
      </div>
    </div>
  </div>
</div>

Minimum

<div class="c-moodal" tabindex="-1" aria-hidden="true">
  <div class="c-moodal__container">
    <div class="c-moodal__inner">
      <div class="c-moodal__body">
        <div
          class="c-moodal__content"
          role="dialog"
          aria-modal="true"
          data-moodal-container
        ></div>
      </div>
    </div>
  </div>
</div>

3. Initialize Core

new Moodal( wrapperElement: string|HTMLElement, <options>);

// Init Core
const myModal = new Moodal('.c-moodal'); // selector or HTMLElement

// Init Core with options
const myModal = new Moodal('.c-moodal', {
  noBackgroundScroll: true,
  backgroundElement: document.querySelector('.page-wrapper'),
  waitContentLoaded: true,
  stateClasses: {
    isVissible: 'is-vissible',
    isLoading: 'is-loading',
  },
});

4. Add Controller

moodal.addController(<params>)

• Example 1: Get content from DOM element in the page.

<!-- controller -->
<button type="button" data-moodal-anchor="myContent">
  Show Modal of `myContent`
</button>
<!-- template for content -->
<template id="myContent" style="display:none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,...</p>
</template>

const modalCtrl = myModal.addController({
  controllerAttr: 'data-moodal-anchor',
  getContent: (trigger) => {
    // `trigger` is value of attribute `data-moodal-anchor`.
    const targetEl = document.getElementById(trigger);
    if (!targetEl) return;
    const content = document.createElement('div');
    content.innerHTML = targetEl.innerHTML;
    // Must return a HTMLElement
    return content;
  },
});

// You can show/hide modal by JavaScript
modalCtrl.show('myContent');
modalCtrl.hide();

• Example 2: Get content from page by fetch

<!-- controller -->
<button data-moodal-ajax="target.html">Show Modal of `target.html`</button>

const modalCtrlAjax = myModal.addController({
  controllerAttr: 'data-moodal-ajax',
  getContent: async (trigger) => {
    const response = await fetch(trigger, {
      method: 'GET',
    });
    const data = await response.text();
    const wrapper = document.createElement('div');
    wrapper.innerHTML = data;
    const content = wrapper.querySelector('article');
    if (!content) {
      throw new Error('No Content!');
    }
    return content;
  },
});

5. Styling

No theme styles is included in this library.
You need to add the theme css yourself.

.c-moodal__bg {
  background-color: rgba(0, 0, 0, 0.7);
}
.c-moodal__inner {
  padding-top: 60px;
  padding-bottom: 60px;
}
.c-moodal__body {
  border-radius: 6px;
  padding: 40px;
  background-color: #fff;
}

Life cycle

---

Core Params

Param Name	Type	Default	Desc
containerSelector	string	"[data-moodal-container]"	Selector for the element appended content
hideOnClickSelector	string	"[data-moodal-close]"	Selector for elements that close modal when clicked
noBackgroundScroll	boolean	false	if true, fix scrolling element
backgroundElement	HTMLElement	undefined	The element you want to stop scrolling. ex. document.querySelector(".page-wrapper") * require if noBackgroundScroll is true
waitContentLoaded	boolean	true	if true, the modal is shown after <img> or <iframe> element is loaded.
stateClasses	Object		Classes for showing / loading state
stateClasses.isVissible	string | string[]	is-vissible	Class on showing modal
stateClasses.isLoading	string | string[]	is-loading	Class on loading modal
logLevel	number	2	0 = off, 1 = error, 2 = warning, 3 = info, 4 = debug
enableFocusTrap	boolean	true	Trap focus within a modal container on showing
hideByEscKey	boolean	true	Hide modadal using the ESC Key

Controller Params

myModal.addController({
  getContent: (trigger) => {
    // You must make content element form `trigger`
    // ...some code
    return content; // return HTMLElement
  },
  controllerAttr: 'data-modal-control',
});

Param Name	Type	Default	Desc
getContent	(trigger: string) => Promise<HTMLElement> | HTMLElement	undefind * required	Get the content(HTMLElement) from trigger argment
controllerAttr	string	""	Data attribute name for button elements.
waitContentLoaded	boolean	initialParam.waitContentLoaded	Overide the core option
manualShow	boolean	false	if true, you need show the modal manualy

Lifecycle Hooks

myModal.addController({
    getContent: (target)=> {
        ...
    },
    beforeAppend: (context) => {
        // context argment is object  { content: HTMLElement, trigger:string }
        console.log('on before append:',context);
    },
    afterAppend: ({content,trigger}) => {
        // if this return `Promise`, proccess wait for resolve.
       return new Promise((resolve, rejects) => {
           console.log('content:',content,'trigger:',trigger);
            setTimeout(() => {
                console.log('1000ms later after appending');
                resolve();
            }, 1000);
        });
    }

})

Hooks

Hook Name	Type	Desc
beforeAppend	(context) => Promise<void> | void;	Hook before appending the content
afterAppend	(context) => Promise<void> | void;	Hook after appending the content
beforeShow	(context) => Promise<void> | void;	Hook before showing the modal
afterShow	(context) => Promise<void> | void;	Hook after showing the modal
beforeHide	(context) => Promise<void> | void;	Hook before hiding the modal
afterHide	(context) => Promise<void> | void;	Hook after hiding the modal

Filter

Hook Name	Type	Desc
contentCreated()	(content: HTMLElement) => HTMLElement | Promise<HTMLElement> | void;	Filtering the content before beforeAppend running

---

Browser support

Moodal is using Promose. Can I use
If you need support legacy browser like IE11, use polyfill

---

License

MIT