如何在twitter-bootstrap模态窗口中插入Django表单？
有人在四月份提出了完全相同的问题，没有任何答案。但是由于他提供的信息太少了；这个问题被放弃了。
我也有同样的问题。在main_page.html我有这行：
<a href="/contact/edit/{{ item.id }}" title="Edit">edit</a>
一旦你单击此处，编辑模板将出现在Twitter引导程序模式内。
url.py
(r'^contact/edit/(?P<contact_id>\d+)/$', contact_view),
view.py
def contact_view(request, contact_id=None):
profile = request.user.get_profile()
if contact_id is None:
contact = Contact(company=profile.company)
template_title = _(u'Add Contact')
else:
contact = get_object_or_404(profile.company.contact_set.all(), pk=contact_id)
template_title = _(u'Edit Contact')
if request.POST:
if request.POST.get('cancel', None):
return HttpResponseRedirect('/')
form = ContactsForm(profile.company, request.POST, instance=contact)
if form.is_valid():
contact = form.save()
return HttpResponseRedirect('/')
else:
form = ContactsForm(instance=contact, company=profile.company)
variables = RequestContext(request, {'form':form, 'template_title': template_title})
return render_to_response("contact.html", variables)
通常这是contact.html的外观：
<form class="well" method="post" action=".">
{% csrf_token %}
{{form.as_p}}
<input class="btn btn-primary" type="submit" value="Save" />
<input name="cancel" class="btn" type="submit" value="Cancel"/>
</form>
我可以把它放进去
问题答案：
除非你需要使用模态之外的联系表格，否则这应该对你有用。如果确实需要在其他地方使用它，请维护两个版本（一个模式，一个不使用）。另外，一个技巧-给django-crispy-forms一个过渡-它可以帮助你使用twitter-bootstrap类呈现表单。
contact.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>
编辑：
好的，现在我知道你可能有多个表单，将每个表单都隐藏在html中可能是个坏主意。你可能想要使用ajax-y版本，并按需加载每种表单。我在这里假设在表单提交时，整个页面都会重新加载。如果你要异步提交表单，请在其他地方找到答案。
我们将从重新定义contact.html片段开始。它应该在模态中进行渲染，并包含与模态完美搭配所需的所有标记。contact你最初拥有的视图很好-除非表单无效，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>
这都是未经测试的，但它应该为你提供一个良好的起点/起点。
-
问题内容： 我正在尝试在自举弹出窗口中显示HTML，但不知为何它不起作用。我在这里找到了一些答案，但这对我不起作用。如果我做错了事，请告诉我。 问题答案： 您不能使用，因为它属于它，所以它不起作用，请更改它，这一切都很好。 这是正在工作的 JSFiddle ，它向您展示了如何创建引导弹出窗口。 代码的相关部分如下： HTML： JavaScript： 顺便说一句，您始终至少需要启用弹出窗口。但是您
-
问题内容： 我正在使用Twitter Bootstrap模态窗口功能。当有人单击我的表单上的提交时，我想在单击表单中的“提交按钮”时显示模式窗口。 jQuery的： 问题答案： Bootstrap具有一些可以在模式上手动调用的功能： 您可以在此处看到更多信息：Bootstrap模态组件 特别是方法部分。 因此，您需要更改： 至：
-
本文向大家介绍Bootstrap模态窗口源码解析，包括了Bootstrap模态窗口源码解析的使用技巧和注意事项，需要的朋友参考一下 前言： bootstrap的 js插件的源码写的非常好，也算是编写jquery插件的模范写法，本来还想大篇详细的分析一下呢，唉，没时间啊，很早之前看过的源码了，现在贴在了博客上， 300来行的代码，其中有很多jquery的高级用法，建议，从github上下载一下源码，
-
我不知道如何在JavaFX中创建模式窗口。基本上我有文件选择器，我想在用户选择文件时问他们一个问题。我需要这些信息来解析文件，因此执行需要等待答案。 我已经看到了这个问题，但我还没有找到如何实现这个行为。
-
问题内容： 我正在构建一个Rails应用程序，并且我想通过AJAX将Rails部分中的内容放入模式中。 在Twitter Bootstrap 2.3.2模式中，我阅读了文档，您可以使用远程密钥通过ajax加载内容。 http://getbootstrap.com/2.3.2/javascript.html#modals 但是，这仅允许将内容注入，而不是动态构建整个模式。 有没有办法用JS动态构建整
-
给对话框，确认信息框，或者其他内容使用模态时可以调用。为了使模态工作，你需要给模态一个 Id 来关联触发器。增加一个关闭按钮，只要增加类 .modal-close 到你的关闭按钮上。 模态的 HTML 结构 <!-- Modal Trigger --> <a class="waves-effect waves-light btn" href="#modal1">模态</a> <!-- Modal