Modal Component

The modal component is commonly used as an interactive panel dialog on top of the main content to show or gather more information from the user.

The Modal component is not included as a core component because it is unlikely to be used on every page. So you have to import it manually when it is actually needed on the page.

But it is really up to you if you want to add it as a core component. You can easily register it in the main.js file.

Let's get started.

Usage #

You just need a trigger and modal elements in order to create a modal. Add the data-modal-toggle="yourModalId" attribute where yourModalId matches the id of the modal that you are targeting.

The modal is hidden by default. Apply the aria-modal="true" attribute to the target element if you want the modal is open by default.

Remember to set a modal class to the modal element like in the example code.

Header Footer Modal #

Usually, the content of modals has a header, body and footer elements in it. Don't be worried, you got this.

Close Button #

You can create any element as a close trigger. But, we recommend you use the button. Setup the close elements just trigger elements. Checkout the example code for detailed usage.

<button type="button" class="button" data-modal-toggle="closeButtonDialog">Modal with Close Button</button>
                                <div id="closeButtonDialog" class="modal">
                                    <div class="modal__header flex justify-between items-center">
                                        <h3 class="modal__title">Modal with Close Button</h3>
                                        <button class="button button--icon button--flat" data-modal-toggle="closeButtonDialog">
                                            <i data-icon="feather__x"></i>
                                        </button>
                                    </div>
                                    <div class="modal__body">Modal Body</div>
                                    <div class="modal__footer">
                                        <button type="button" class="button scheme-primary" data-modal-toggle="closeButtonDialog">Got it!</button>
                                    </div>
                                </div>

Position #

Set the modal position by appending tailwind align self utilities to the modal element. For example, use items-start if you want to place the modal at the top.

<button type="button" class="button" data-modal-toggle="topPositionDialog">Top Modal Position</button>
                                <div id="topPositionDialog" class="modal self-start my-28">
                                    <div class="modal__header">
                                        <div class="modal__title">Top Modal Position</div>
                                    </div>
                                    <div class="modal__body">Duis vel pellentesque metus. In velit enim, porttitor non laoreet nec, ultrices a ante. Aenean risus nibh, porttitor nec rutrum sit amet, dictum sit amet velit. Vivamus quam dolor, rhoncus vitae interdum non, interdum eu odio. Maecenas aliquam sem id dolor finibus auctor. Sed blandit, ligula varius pharetra pellentesque, elit sapien convallis lacus, sit amet viverra nibh elit id nisi. Suspendisse eu arcu arcu. Nunc ullamcorper ipsum a urna venenatis, vitae gravida nibh tincidunt. Mauris sodales lacus et consequat cursus. Vivamus ut velit gravida, venenatis odio id, congue nisi.</div>
                                    <div class="modal__footer"><button type="button" class="button scheme-primary" data-modal-toggle="topPositionDialog">Okay</button></div>
                                </div>

Sizes #

Change the modal size by customizing the modal element with tailwind max width utilities. For example, use max-w-lg if you want a smaller modal, because the default value is max-w-2xl.

Transition #

The modal transition is a slide up by default. Let's try changing the transition to the slide down. Append the -translate-y-12 class to the modal element.

More Examples #

Using Card Element #

You can also use card elements as modal content instead.

Overlapping Modal #

Open another modal inside the modal.

Initializing #

You can use one of these two methods to initialize the modal instance.

Via Data Attributes #

The easiest way to initialize the modal component is by using the data attributes. The usage above is using this method. If you haven't checked it out yet, just scroll back to the top.

It is required to prepare the trigger and modal elements. Set the id of the modal element, then add the data-modal-toggle="yourModalId" attribute where yourModalId matches the modal element id you set before.

Via Javascript #

Initialize the modal component by calling the Modal.createInstance(element, options) function. Where element is the modal element itself.

Function	Description
`Modal.createInstance(element, options)`	Create a Modal instance.
`Modal.getInstance(element, options)`	If any, get the Modal instance.
`Modal.getOrCreateInstance(element, options)`	Get the Modal instance if there is one. Create it if necessary.
`Modal.dataApi(wrapperElement)`	Execute the Data API within the specified `wrapperElement`.

API #

Parameters #

Most Skewind component constructors accept two parameters, as well as the Modal component.

Parameter	Type	Required	Description
`modalEl`	HTMLElement	Required	The modal element. You have to make sure that the element has a `modal` class.
`options`	Object	Optional	Pass the modal options object.

Options #

There are currently no available options.

Methods #

Each instance has these public methods.

Methods	Return	Description
`toggle()`	void	Toggle the visibility of the modal.
`show()`	void	Show the modal.
`hide()`	void	Hide the modal.

Events #

This event may be emitted for hooking into modal functionality.

Event	Description
`modal.toggle`	This event is triggered when the dropdown component executed toggle method.
`modal.show`	This event is triggered when the modal element is about to show.
`modal.hide`	This event is triggered when the modal element is about to hide.

Messages

Notifications

Modal