Skip to content

Modal

Definition

A modal component is a dialog box that appears on top of the current page content, requiring user interaction before they can return to the main content. Modals are used for tasks such as displaying alerts, forms, or additional information without navigating away from the current page.

Modals can be customized with various elements, including headers, footers, buttons, and form fields, to suit different purposes.

  • Appears on top of the current page content.
  • Requires user interaction before returning to the main content.
  • Used for alerts, forms, or additional information.
  • Customizable with headers, footers, buttons, and form fields.

Example

{% url 'landing:component:modal_content' as modal_content_url %}

<div
    x-data="{
        open_recipe() {
            dispatch_modal_view('{{ modal_content_url }}')
        }
    }"
>
    {% include 'django_spire/button/primary_button.html' with button_text='Open Recipe' x_button_click="open_recipe()" %}
</div>