除非您需要在模式之外使用联系表单，否则这应该适合您。如果您确实需要在其他地方使用它，请维护两个版本（一种是模式版本，一种不是模式版本）。另外，还有一个提示——给django-crispy-forms查找 - 它可以帮助您使用 twitter-bootstrap 类呈现表单。
联系.html：
<div class="modal hide" id="contactModal">
<form class="well" method="post" action="/contact/edit/{{ item.id }}">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Editing Contact</h3>
</div>
<div class="modal-body">
{% csrf_token %}
{{form.as_p}}
</div>
<div class="modal-footer">
<input class="btn btn-primary" type="submit" value="Save" />
<input name="cancel" class="btn" type="submit" value="Cancel"/>
</div>
</form>
</div>
main_page.html
<html>
...
<a data-toggle="modal" href="#contactModal">Edit Contact</a>
{% include "contact.html" %}
...
</html>
Edit:
好的，既然我知道您可能有多个表单，那么将每个表单隐藏在 html 中渲染可能是一个坏主意。您可能想要使用 ajax-y 版本，并按需加载每个表单。我在这里假设在提交表单时，整个页面将重新加载。如果你想异步提交表单，其他地方有答案.
我们将从重新定义开始contact.html分段。它应该在模态中呈现，并包含与模态良好配合所需的所有标记。这contact您最初拥有的视图很好 - 除非表格是invalid，你最终将渲染contact.html没有别的。
<form class="well contact-form" method="post" action="/contact/edit/{{ item.id }}">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Editing Contact</h3>
</div>
<div class="modal-body">
{% csrf_token %}
{{form.as_p}} <!-- {{form|crispy}} if you use django-crispy-forms -->
</div>
<div class="modal-footer">
<input class="btn btn-primary" type="submit" value="Save" />
<input name="cancel" class="btn" type="submit" value="Cancel"/>
</div>
</form>
而现在，你的main_page.html:
<html>
.. snip ..
<a class="contact" href="#" data-form="/contact/edit/{{ item.id }}" title="Edit">edit</a>
<a class="contact" href="#" data-form="/contact/edit/{{ item.id }}" title="Edit">edit</a>
<a class="contact" href="#" data-form="/contact/edit/{{ item.id }}" title="Edit">edit</a>
<div class="modal hide" id="contactModal">
</div>
<script>
$(".contact").click(function(ev) { // for each edit contact url
ev.preventDefault(); // prevent navigation
var url = $(this).data("form"); // get the contact form url
$("#contactModal").load(url, function() { // load the url into the modal
$(this).modal('show'); // display the modal on url load
});
return false; // prevent the click propagation
});
$('.contact-form').live('submit', function() {
$.ajax({
type: $(this).attr('method'),
url: this.action,
data: $(this).serialize(),
context: this,
success: function(data, status) {
$('#contactModal').html(data);
}
});
return false;
});
</script>
.. snip ..
</html>
这一切都未经测试，但它应该为您提供一个开始/迭代的好地方。
