@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

| Property | Default value | | --- | --- | | --modal__body--transition-timing-function | ease | | --modal__body--transition-duration | 0.5s |

Events

showModal

Event showModal dispatch when modal open

hideModal

Event showModal dispatch when modal hide

Methods

show(id)

Show modal

| Param | Type | | --- | --- | | id | string |

hide({ hideOverlay })

Hide opened modal

| Param | Type | Description | | --- | --- | --- | | hideOverlay | boolean | Wheter to hide overlay. Default - true |

activateFocusTrap()

Activate focus trap for active modal

deactivateFocusTrap()

Deactivate focus trap for active modal