modality

modal

Usage no npm install needed!

<script type="module">
  import modality from 'https://cdn.skypack.dev/modality';
</script>

README

modality

var thing = document.createElement('div');
var text = document.createTextNode('ho ho ho');
thing.appendChild(text);

var modal = Modality();
modal.html(thing).show();

var button = document.getElementById('modal_button');
button.addEventListener('click', function(event) {
    modal.show();
});

Modality

Modality constructor takes an optional options param. Supply classes and attributes to apply to main modal window.

var defaults = {
    'classes': [],
    'attributes': {},
}

Add 'modality-cancel' class to any element to attach event listener for a close click event.

Supplied CSS is entirely structural in nature. Main element has no styles applied.

The modal can be centered by applying a width and margin: 0 auto;

The wrapper element defaults to having an opaque whitish background. Override .modality-wrapper background property to disable.