@lovata/modal v0.0.7

@lovata/modal

Installation

npm install @lovata/modal

Initialization

Javascript

import Modal from '@lovata/modal';

CSS

@import '@lovata/modal/css/modal';

HTML layout

<div class="modal" id="{id}">
    <div class="modal__body">
        <button type="button" data-modal-close></button>
        ...
    </div>
</div>

Element with attribute data-modal-close click will close current modal. Element with attribute data-modal-open="{id}" click will open modal with specified id:

<button type="button" data-modal-open="{id}">...</button>

CSS settings

Helper accepts some css custom properties

Events

showModal

Event showModal dispatch when modal open

hideModal

Event showModal dispatch when modal hide

Methods

show(id)

Show modal

hide({ hideOverlay })

Hide opened modal

activateFocusTrap()

Activate focus trap for active modal

deactivateFocusTrap()

Deactivate focus trap for active modal