mirror of
https://github.com/perstarkse/minne.git
synced 2026-02-25 09:34:50 +01:00
39 lines
1.5 KiB
HTML
39 lines
1.5 KiB
HTML
<dialog id="body_modal" class="modal">
|
|
<div
|
|
class="modal-box rounded-none border-2 border-neutral bg-base-100 shadow-[8px_8px_0_0_#000] {% block modal_class %}{% endblock %}">
|
|
<form id="modal_form" {% block form_attributes %}{% endblock %}>
|
|
<div class="flex flex-col flex-1 gap-4">
|
|
{% block modal_content %}{% endblock %}
|
|
</div>
|
|
|
|
<div class="u-hairline mt-4 pt-3 flex flex-col gap-2 sm:flex-row sm:justify-end sm:items-center">
|
|
<!-- Close button (always visible) -->
|
|
<button type="button" class="nb-btn w-full sm:w-auto" onclick="document.getElementById('body_modal').close()">
|
|
Close
|
|
</button>
|
|
|
|
<!-- Primary actions block -->
|
|
{% block primary_actions %}{% endblock %}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
// Auto-open modal when injected
|
|
document.getElementById('body_modal').showModal();
|
|
|
|
// Close modal on successful form submission
|
|
document.getElementById('modal_form')
|
|
.addEventListener('htmx:afterRequest', (evt) => {
|
|
if (evt.detail.elt !== evt.currentTarget) return; // ignore inner htmx requests
|
|
if (evt.detail.successful) document.getElementById('body_modal').close();
|
|
});
|
|
|
|
// Clear modal content on close to prevent browser back from reopening it
|
|
document.getElementById('body_modal').addEventListener('close', (evt) => {
|
|
evt.target.innerHTML = '';
|
|
});
|
|
</script>
|
|
<form method="dialog" class="modal-backdrop">
|
|
<button>close</button>
|
|
</form>
|
|
</dialog> |