<c-button variant="primary" onclick="my_modal.showModal()">
    Open Modal
</c-button>

<c-modal id="my_modal">
    <h3 class="text-lg font-bold">Basic Modal</h3>
    <p class="py-4">This is a simple modal dialog.</p>
    <div class="flex justify-end">
        <c-button variant="secondary" onclick="my_modal.close()">Close</c-button>
    </div>
</c-modal>

Component API

Property	Type	Default	Description
`id`	`string`	`required`	Unique identifier for the modal
`class`	`string`	`-`	Additional CSS classes for the modal container

JavaScript Methods

Method	Description
`showModal()`	Opens the modal dialog
`close()`	Closes the modal dialog

Examples

Confirmation Dialog

A modal used for confirming destructive actions with primary and secondary actions.

<c-button icon="rocket" variant="error" onclick="confirm_modal.showModal()">
    Delete Account
</c-button>

<c-modal id="confirm_modal">
    <h3 class="text-lg font-bold">Confirm Account Deletion</h3>
    <p class="py-4">Are you sure you want to delete your account? This action cannot be undone.</p>
    <div class="flex gap-2 justify-end">
        <c-button variant="ghost" onclick="confirm_modal.close()">Cancel</c-button>
        <c-button variant="error" onclick="confirm_modal.close()" icon="rocket">
            Delete Account
        </c-button>
    </div>
</c-modal>

Form Modal

A modal containing a form for user input and data collection.

<c-button variant="primary" onclick="form_modal.showModal()">
    Add User
</c-button>

<c-modal id="form_modal">
    <h3 class="text-lg font-bold mb-4">Add New User</h3>
    <form class="space-y-4">
        <div>
            <label class="label">
                <span class="label-text">Name</span>
            </label>
            <c-form.input type="text" placeholder="Enter full name" required />
        </div>
        <div>
            <label class="label">
                <span class="label-text">Email</span>
            </label>
            <c-form.input type="email" placeholder="Enter email address" required />
        </div>
        <div>
            <label class="label">
                <span class="label-text">Role</span>
            </label>
            <select class="select select-bordered w-full">
                <option>Admin</option>
                <option>User</option>
                <option>Guest</option>
            </select>
        </div>
    </form>
    <div class="flex gap-2 justify-end mt-6">
        <c-button variant="ghost" onclick="form_modal.close()">Cancel</c-button>
        <c-button variant="primary" onclick="form_modal.close()">Save User</c-button>
    </div>
</c-modal>

HTMX Integration

Modal with HTMX for dynamic content loading and form submission.

<c-button variant="primary" onclick="htmx_modal.showModal()">
    Load Dynamic Content
</c-button>

<c-modal id="htmx_modal">
    <h3 class="text-lg font-bold">Dynamic Modal</h3>
    <div class="py-4">
        <c-button variant="secondary" 
                  hx-get="/api/load-content/" 
                  hx-target="#modal-content" 
                  hx-swap="innerHTML"
                  spinner="true">
            Load Content
        </c-button>
        <div id="modal-content" class="mt-4 p-4 bg-base-300 rounded">
            Dynamic content will appear here.
        </div>
    </div>
    <div class="flex justify-end">
        <c-button variant="ghost" 
                  onclick="htmx_modal.close()" 
                  hx-on::after-request="htmx_modal.close()">
            Close
        </c-button>
    </div>
</c-modal>

Appendix

Best Practices

Unique IDs

Always provide unique id attributes for each modal to avoid conflicts.

Escape Key

Users can press ESC to close modals. Consider this when designing confirmation flows.

Button Integration

Use the modal prop on buttons for automatic modal opening without JavaScript.

Tungsten UI 💡