Components / Modal

Modal

# Introduction
# Usage
# Focus
# Opening
# Livewire component
# JavaScript

# Introduction

A modal is a dialog box that is displayed on top of the current page. It is used to display additional information or to ask the user for confirmation before performing an action. The <zinq:modal> component is a powerful modal component that can be used to create a variety of modal dialogs.

# Usage

Each modal requires a unique ID. The ID is used to identify the modal and to show or hide it using JavaScript. The modal can be triggered by a button or a link.

<zinq:modal id="zinq-example-1" title="Sign In">
    <zinq:form action="login">
        <zinq:input placeholder="Email address..." label="Email" />
        <zinq:input placeholder="Password..." label="Password" />
        <zinq:checkbox id="zinq-rm" size="sm">Remember me</zinq:checkbox>
        <div class="mt-6 flex justify-end">
            <zinq:button primary loading>Sign in with email</zinq:button>
        </div>
    </zinq:form>
</zinq:modal>

<zinq:button modal="zinq-example-1">Open modal</zinq:modal>

# Focus

The modal component is designed to be accessible and user-friendly. We have added a focusInput attribute to the <zinq:modal> component that allows you to specify the ID of an input element that should receive focus when the modal is opened.

<zinq:modal focusInput="zinq-focus-input" id="zinq-example-2" title="Join Waitlist">
    <zinq:form action="login">
        <zinq:input placeholder="Email address..." label="Email" />
        <zinq:checkbox size="sm">
            I accept <a href="#">Terms of Service</a>
        </zinq:checkbox>
        <div class="mt-6 flex justify-end">
            <zinq:button primary loading>Join waitlist</zinq:button>
        </div>
    </zinq:form>
</zinq:modal>

<zinq:button modal="zinq-example-2">Open modal</zinq:modal>

# Opening

The modal component uses browser events to open and close the modal.

The <zinq:button> button was designed to integrate with the modal component. You can use the modal attribute to specify the ID of the modal that should be opened when the button is clicked.

# Livewire component

Use Zinq::openModal(...) method to open the modal directly from the Livewire component.

Simply pass the modal ID as the first argument to the openModal method.

...
use Mattbit\Zinq\Facades\Zinq;

public function save(): void
{
    // Save user data...

    // Trigger rating modal
    Zinq::openModal('rate');
}

# JavaScript

You can use any element to open the modal.

Open modal

<p
    x-data
    x-on:click="window.dispatchEvent(new CustomEvent('open-modal', { detail: 'zinq-example-2' }))"
>Open modal</p>