我正在尝试使我的表单呈现为模态，但是模态显示为空。表单未以模态呈现，我使用的是函数库视图，而不是基于类的视图。我也尝试了Django-Bootstrap-Modal-Forms，但是它根本对我不起作用，所以我恢复了下面方法的代码
型号：
class Startup ( models.Model ) :
author = models.OneToOneField ( User , on_delete = models.CASCADE )
startup_name = models.CharField ( 'Startup Name' , max_length = 32 , null = False , blank = False )
class Startup_About ( models.Model ) :
str_about = models.ForeignKey ( Startup , on_delete = models.CASCADE )
about = models.TextField ( 'About Startup' , max_length = 2000 , null = False , blank = False )
problem = models.TextField ( 'Problem/Opportunity' , max_length = 2000 , null = False , blank = False )
business_model = models.TextField ( 'Business Monitization Model' , max_length = 2000 , null = False ,blank = False )
offer = models.TextField ( 'Offer to Investors' , max_length = 2000 , null = False , blank = False )
查看：
def create_startupaboutform(request) :
stup = Startup.objects.filter(author=request.user)
if request.method == 'POST' :
form = startupaboutform ( request.POST )
if form.is_valid ( ) :
instance = form.save ( commit = False )
instance.str_about = stup
instance.save ( )
return redirect ( 'str_detailedview' )
else :
form = startupaboutform ( )
return render ( request , 'create_about.html' , { 'form' : form } )
表格：
class startupaboutform(forms.ModelForm):
class Meta:
model = Startup_About
fields = ('about','problem','business_model','offer',)
widgets = {
'about' : forms.Textarea ( attrs = { 'class' : 'form-control' } ) ,
'problem' : forms.Textarea ( attrs = { 'class' : 'form-control' } ) ,
'business_model' : forms.Textarea ( attrs = { 'class' : 'form-control' } ) ,
'offer' : forms.Textarea ( attrs = { 'class' : 'form-control' } ) ,
}
主页HTML：
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="{% static 'assets/bootstrap/css/bootstrap.min.css' %}">
</head>
<body>
<a href="#" class="btn btn-info btn-lg">Open Modal</a>
{% include "create_about.html" with form = form %}
<script>
$(".btn").click(function(){
$("#about").modal("show");
$(".modal-content").load("{% url 'create_startupaboutform' %}");
});
</script>
<script src="{% static 'assets/js/jquery.min.js' %}"></script>
<script src="{% static 'assets/bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
MODAL HTML：
<div class="modal fade" id="about" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<form action="{% url 'create_startupaboutform' %}" method="post" class="form">{% csrf_token %}
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">About Startup</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
{{form}}
</div>
<div class="modal-footer">
<button class="btn btn-light" type="button" data-dismiss="modal">Close</button>
<button class="btn btn-primary" type="submit">Submit Data</button>
</div>
</div>
</form>
</div>
</div>
我通过将Jquery添加到触发按钮/链接并按如下方式加载表单解决了该问题，请记住与触发按钮/链接放在同一页面中的Jquery代码是：
<script>
$(document).ready(function(){
$("#id of the trigger button").on("click", function(){
$("#form id surrounding the Modal").load("/Django Route ex. add_new", function(){
$("#Modal ID").modal("show");
});
});
});
</script>
确保在触发按钮或链接的同一页面中添加包含标记：
{% include "route to the HTML containing the modal" %}
将您的模式放入新的HTML中，如下所示：
<form id="about-form">
<div class="modal fade" id="about" role="dialog" tabindex="-1">
<div class="modal-dialog " role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Title</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<label>About Startup</label>
{{form.about}}
</div>
<div class="modal-footer">
<button class="btn btn-light" type="button" data-dismiss="modal">Close</button>
<button class="btn btn-primary" type="button">Save</button>
</div>
</div>
</div>
</div>
</form>