Modal

A fullscreen modal popup.

• Usage
• Name
• Heading and subheading
• Opening
• Closing
• Nesting
• Reference
• Slots

#Usage

<x-modal 
	name="basic" 
	heading="Delete Post" 
	subheading="Are you sure you want to delete that post? This action cannot be undone."
>
	<x-slot:buttons>
		<x-button variant="ghost" @click="$close()">Cancel</x-button>
		<x-button variant="danger" @click="$close()">Delete</x-button>
	</x-slot:buttons>
</x-modal>

#Name

The name is a required parameter and should be unique to the page and follow a slugified naming convention. The name you provide is used for opening and closing events.

<x-modal name="delete-post">
	...
</x-modal>

#Heading and subheading

You may pass in a heading and a subheading to the modal.

<x-modal heading="Delete Post" subheading="Are you sure you want to delete that post?">

#Opening

Livewire

$this->dispatch('modal:open:YOUR_NAME');

Alpine JS

<button @click="$dispatch('modal:open:YOUR_NAME')">
	Open Modal
</button> 

Vanilla JS

window.dispatchEvent(new CustomEvent('modal:open:YOUR_NAME'));

#Closing

Livewire

$this->dispatch('modal:close:YOUR_NAME');

Alpine JS

<button @click="$dispatch('modal:close:YOUR_NAME')">
	Open Modal
</button> 

Vanilla JS

window.dispatchEvent(new CustomEvent('modal:close:YOUR_NAME'));

#Nesting

Although not recommended, you may nest modals within one another. It's important to pass in overlay="false" and noscroll="false" to the nested modal.

#Reference

#Slots