Badger Modal

Demo

It's on the GitHub Pages.

Installation

yarn add --dev badger-modal
# or
npm install --save-dev badger-modal

or you can manually download Badger Modal from repository.

How to use

Add modal html:

<button type="button" data-modal-target="#exampleModal">Open Example Modal</button>
<div class="bm-modal" id="exampleModal" tabindex="-1" aria-hidden="true" aria-labelledby="exampleModalTitle">
  <div class="bm-dialog">
    <div class="bm-content">
      <div class="bm-header">
        <button type="button" class="bm-close" data-modal-dismiss aria-label="Close">Close</button>
      </div>
      <div class="bm-body">
        <div class="bm-title" id="exampleModalTitle">Modal Title</div>
        <div class="bm-text">Modal Text</div>
        <div class="bm-btns">
          <button type="button" data-modal-dismiss>Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

Use styles and scripts:

<link rel="stylesheet" href="dist/badger-modal.css">
<link rel="stylesheet" href="dist/badger-modal.js">

Or import via ES modules:

import BModal from 'badger-modal';

To initialise:

const toggleEls = document.querySelectorAll('[data-modal-target]');

toggleEls.forEach(el => {
  const modalTarget = el.dataset.modalTarget;
  const modalEl = document.querySelector(modalTarget);

  if (modalEl) {
    const modal = new BModal(modalEl);

    el.addEventListener('click', e => {
      e.preventDefault();
      modal.show();
    });
  }
});

License

MIT License