minne/html-router/templates/modal_base.html

<dialog id="body_modal" class="modal">
  <div class="modal-box {% block modal_class %}{% endblock %} ">
    <form id="modal_form" {% block form_attributes %}{% endblock %}>
      <div class="flex flex-col flex-1 space-y-4">
        {% block modal_content %} <!-- Form fields go here in child templates -->
        {% endblock %}
      </div>

      <div class="modal-action">
        <!-- Close button (always visible) -->
        <button type="button" class="btn" onclick="document.getElementById('body_modal').close()">
          Close
        </button>

        <!-- Primary actions block -->
        {% block primary_actions %}
        <!-- Submit/Save buttons go here in child templates -->
        {% 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>