@lovata/modal

    0.0.7 • Public • Published

    @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

    Install

    npm i @lovata/modal

    DownloadsWeekly Downloads

    1

    Version

    0.0.7

    License

    GPL-3.0-or-later

    Unpacked Size

    41 kB

    Total Files

    5

    Last publish

    Collaborators

    • lautsevich
    • andrey_kharanenka