moviewyrm/bookwyrm/templates/components/modal.html

{% load i18n %}

<div class="modal {% if active %}is-active{% endif %}" id="{{ id }}">
    <div class="modal-background" data-modal-close></div>
    <div class="modal-card" role="dialog" aria-modal="true" tabindex="-1" aria-described-by="{{ id }}_header">
        <header class="modal-card-head">
            <h2 class="modal-card-title mb-0" id="{{ id }}_header">
                {% block modal-title %}{% endblock %}
            </h2>
            <button
                type="button"
                class="delete"
                aria-label="{% trans 'Close' %}"
                data-modal-close
            ></button>
        </header>

        {% block modal-form-open %}{% endblock %}
        <section class="modal-card-body">
            {% block modal-body %}{% endblock %}
        </section>
        <footer class="modal-card-foot">
            {% block modal-footer %}{% endblock %}
        </footer>
        {% block modal-form-close %}{% endblock %}
    </div>
    <button
        type="button"
        class="modal-close is-large"
        aria-label="{% trans 'Close' %}"
        data-modal-close
    ></button>
</div>