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.
Sign In
<zinq:modalid="zinq-example-1"title="Sign In"><zinq:formaction="login"><zinq:inputplaceholder="Email address..."label="Email" /><zinq:inputplaceholder="Password..."label="Password" /><zinq:checkboxid="zinq-rm"size="sm">Remember me</zinq:checkbox><divclass="mt-6 flex justify-end"><zinq:buttonprimaryloading>Sign in with email</zinq:button></div></zinq:form></zinq:modal><zinq:buttonmodal="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.
Join Waitlist
<zinq:modalfocusInput="zinq-focus-input"id="zinq-example-2"title="Join Waitlist"><zinq:formaction="login"><zinq:inputplaceholder="Email address..."label="Email" /><zinq:checkboxsize="sm">
I accept <ahref="#">Terms of Service</a></zinq:checkbox><divclass="mt-6 flex justify-end"><zinq:buttonprimaryloading>Join waitlist</zinq:button></div></zinq:form></zinq:modal><zinq:buttonmodal="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.
Rate your experience
...
useMattbit\Zinq\Facades\Zinq;
publicfunctionsave(): void{
// Save user data...// Trigger rating modalZinq::openModal('rate');
}
# JavaScript
You can close modal from anywhere in your JavaScript code by dispatching a custom event.