minne/html-router/templates/modal_base.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.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>