AgenciaEgo / egodesign-modal

Modal component

@egodesign/modal

Installation

npm install @egodesign/modal

Usage:

Import the EgoModal class into your file and then create as many instances as you need.

import EgoModal from '@egodesign/modal';

const egoModal = new EgoModal({
    element: document.getElementById('egoModal')
});

HTML minimal markup & class names:

<dialog class="modal" id="egoModal">
    <div class="modal__box">
        <button class="modal__close" type="button">Close</button>
        <div class="modal__box__content">
            Modal content.
        </div>
    </div>
</dialog>

Required class names:

Class	Description
modal	This is the mail element that wraps the whole modal, cinluding the overlay.
modal__box	This is the box of the modal itself.
modal__content	This is the context body. When using the injectContent() method the content will be placed inside this element.

Optional class names:

Class	Description
modal__close	Any element inside the modal which has this class will close the modal on click.

Options:

Name	Value	Required	Description
element	DOM element	✓	The main dialog DOM element.
lockScrollOnOpen	boolean		Wheather or not the body scroll should be hidden. Default: true.
animation	string		Besides the default fade in and fade out effect, you can optionally add an extra native animation. Available options are rise, sink, grow or shrink.

Events:

Name	Description
onOpen	Pass a function to be called when modal is opened.
onClose	Pass a function to be called when modal is closed.

Methods:

Name	Description
injectContent	Add content to de modal__content element on the fly. The first parameter should be the HTML string, and it can also recieve a callback function as second parameter.