<div data-controller="modal">
<button class="btn btn-blue" data-action="click->modal#open:prevent">Open Small Modal</button>
<dialog
class="m-auto bg-transparent backdrop:backdrop-blur-xs backdrop:bg-black/50 rounded-lg max-w-sm max-h-screen w-full"
data-modal-target="dialog" data-action="click->modal#backdropClose">
<div class="p-6 bg-white dark:bg-gray-900 dark:text-gray-200">
<button type="button" data-action="modal#close:prevent"
class="absolute top-4 right-4 opacity-70 transition-opacity hover:opacity-100 hover:cursor-pointer focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none rounded-xs ring-offset-background focus:outline-hidden focus:ring-ring">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" width="24" height="24" class="w-5 h-5">
<path fill-rule="evenodd"
d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd" />
</svg>
</button>
<h2 class="mb-4 text-xl">Modal title</h2>
<p class="mb-4">This is an example modal dialog box.</p>
<div class="flex flex-wrap gap-2 justify-end items-center mt-4">
<button class="btn btn-white" data-action="click->modal#close:prevent">Cancel</button>
<button class="btn btn-blue" data-action="click->modal#close:prevent">Close</button>
</div>
</div>
</dialog>
</div>
@register_form_class(ModalParamsForm)
def small_modal(
self,
modal_title="Modal title",
modal_content="This is an example modal dialog box.",
**kwargs,
):
template = Template(
"""
{% load viewcomponent_tags %}
{% component 'modal' size="sm" as component %}
{% call component.trigger %}
<button class="btn btn-blue" data-action="click->modal#open:prevent">Open Small Modal</button>
{% endcall %}
{% call component.body %}
<h2 class="mb-4 text-xl">{{ modal_title }}</h2>
<p class="mb-4">{{ modal_content }}</p>
{% endcall %}
{% call component.actions %}
<button class="btn btn-white" data-action="click->modal#close:prevent">Cancel</button>
<button class="btn btn-blue" data-action="click->modal#close:prevent">Close</button>
{% endcall %}
{% endcomponent %}
""",
)
return template.render(
Context(
{
"modal_title": modal_title,
"modal_content": modal_content,
},
),
)
Small Modal
This is an example of a small modal dialog box.
You can pass size="sm" to the component to set the modal size
| Param | Description | Input |
|---|---|---|
|
Modal title |
|
|
|
Modal content |
|