bluegg-modal

Simple modal

Usage no npm install needed!

<script type="module">
  import blueggModal from 'https://cdn.skypack.dev/bluegg-modal';
</script>

README

Bluegg Modal

A simple modal

Usage

HTML Markup


<!-- YOUR PAGE... -->

<!-- BUTTON TO OPEN MODAL -->
<button type="button" data-modal-target="modal-name">Open modal</button>

<!-- THE MODAL -->
<div class="modal js-modal" aria-hidden="true" aria-labelledby="modal-title" aria-describedby="modal-description" role="dialog" data-modal-trigger="modal-name">
    <div class="modal__inner">
        <h1 id="modal-title">Modal Title</h1>
        <p id="modal-description">Wahoo! Modals!</p>
        <button class="js-modal-close-btn">Close</button>
    </div>
</div>

<!-- OVERLAY USED WHEN MODALS ARE ACTIVE -->
<div id="modal-overlay" class="modal__overlay" tabindex="-1"></div>

</body>

NPM install

# install
npm install bluegg-modal

JS

// import
var Modal = require('bluegg-modal');

// find modals
var modals = document.querySelectorAll('.js-modal');

// init on each modal˜˜
[].forEach.call(modals, function(item, i) {
    new Modal(modals[i]);
});

Thanks

I borrowed the principles/spirit/accessibility work from Principles from this https://github.com/gdkraus/accessible-modal-dialog