Bootstrap modal Mezzanine editable form

editable_form.html

{% load i18n future %}

<style>
.editable-form{
    background: none!important;
}
</style>

{# Edit form #}
<form class="editable-form modal fade" method="post"
    action="{% url "edit" %}" id="{{ editable_form.uuid }}"
    {% if editable_form.is_multipart %} enctype="multipart/form-data"{% endif %}
    tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                {% csrf_token %}
                {% for field in editable_form %}
                <p{% if field.is_hidden %} style="display:none;"{% endif %}>
                    {{ field.label_tag }}<br />{{ field }}{{ field.errors }}
                    {% if field.help_text %}
                    <span class="helptext">{{ field.help_text }}</span>
                    {% endif %}
                </p>
                {% endfor %}
            </div>
            <div class="modal-footer">
                <input type="submit" value="{% trans "Save" %}" class="btn btn-default">
                <input type="button" value="{% trans "Cancel" %}" class="btn btn-default" data-dismiss="modal">
            </div>
        </div>
    </div>
</form>

{# Original content wrapped in span #}
<div class="editable-original">{{ original }}</div>

{# Edit link #}
<a style="visibility:hidden;" class="editable-link" href="#{{ editable_form.uuid }}"
    data-toggle="modal">{% trans "Edit" %}</a>

{# Edit highlight #}
<div style="visibility:hidden;" class="editable-highlight"></div>