Python 我想在我的项目中创建django弹出表单

我在django创建了费用管理系统

问题是我使用的是简单表单，每个表单用户都必须导航到单独的页面

我想在django中创建弹出表单。我搜索了很多网站，但没有找到解决方案

在上面的窗口中，当用户点击付款按钮时，弹出的表单将被打开。 当用户单击提交按钮时，更改将显示在同一页面中

---

有人能告诉我怎么解决这个问题吗？或者，如果您在同一领域工作，请共享代码

为什么不使用引导模态呢

比如说

例子 要查看django引导模式表单，请克隆存储库并在本地运行示例：

$ git clone https://github.com/trco/django-bootstrap-modal-forms.git
$ cd django-bootstrap-modal-forms
$ python -m pip install -r requirements.txt
$ python manage.py migrate
$ python manage.py runserver

Bootstrap模式中的注册表单 有关代码所有部分如何协同工作的说明，请参见段落用法。要测试此处提供的工作解决方案，请克隆并运行示例。 forms.py

signup.html

{% load widget_tweaks %}

<form method="post" action="">
  {% csrf_token %}

  <div class="modal-header">
    <h3 class="modal-title">Sign up</h3>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body">

    <div class="{% if form.non_field_errors %}invalid{% endif %} mb-2">
      {% for error in form.non_field_errors %}
        {{ error }}
      {% endfor %}
    </div>

    {% for field in form %}
      <div class="form-group">
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {% render_field field class="form-control" placeholder=field.label %}
        <div class="{% if field.errors %} invalid{% endif %}">
          {% for error in field.errors %}
            <p class="help-block">{{ error }}</p>
          {% endfor %}
        </div>
      </div>
    {% endfor %}
  </div>

  <div class="modal-footer">
    <button type="button" class="submit-btn btn btn-primary">Sign up</button>
  </div>

</form>

url.py

from django.urls import path
from . import views

app_name = 'accounts'
urlpatterns = [
    path('signup/', views.SignUpView.as_view(), name='signup')
]

.html文件，其中包含模态、触发器元素和实例化modalForm的脚本

<div class="modal fade" tabindex="-1" role="dialog" id="modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content"></div>
  </div>
</div>

<button class="signup-btn btn btn-primary" type="button" name="button">Sign up</button>

<script type="text/javascript">
  $(function () {
    // Sign up button
    $(".signup-btn").modalForm({formURL: "{% url 'accounts:signup' %}"});

  });
</script>

注册
$（函数（）{
//注册按钮
$（“.signup btn”）.modalForm（{formURL:{%url'帐户：注册“%}”）；
});

使用弹出窗口/模态最好使用框架，因为它们提供了简单的构建。试图在一个页面上手动编写多个模态可能会很费劲。但如果你必须的话，这里有一个我用普通html、css和javascript编写的代码

基本原则是：

• 弹出窗口是一个暗显的

  div

  ，它覆盖了视口的100%。它有显示

  none

• 单击按钮时，弹出div的显示属性设置为

  block

• 弹出div可以位于主站点内容之外。它可以通过

  绝对定位来实现这一点

正如其他人所说，检查一些提供模态的框架，例如和

var popup1=document.getElementById（“popup-1”）
var openPopup1=document.getElementById（“open-popup-1”）
var closePopup1=document.getElementById（'close-popup-1'）
openPopup1.addEventListener（'单击'，（）=>{
popup1.style.display=“块”；
})
closePopup1.addEventListener（'单击'，（）=>{
popup1.style.display=“无”；
})

正文{
字体系列：arial；
保证金：0；
填充：0；
框大小：边框框；
}
.主站点{
垫面：5px；
宽度：95%；
最大宽度：960像素；
保证金：0自动；
}
#弹出窗口-1{
显示：无；
背景色：rgba（0,0,0,0.5）；
位置：绝对位置；
高度：100vh；
宽度：100%；
}
.弹出内容{
位置：相对位置；
填充：20px；
保证金：0自动；
背景色：白色；
宽度：400px；
顶部：5vh；
}

弹出标题
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责

接近
网页
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责

打开弹出窗口

欢迎来到SO！请先阅读，了解SO是如何工作的，哪些是好问题。您当前的问题并没有表明您已经尝试过任何事情，也没有提供可重现的问题。您应该了解如何使用javascript和ajax创建就地视图和调用django视图。还有一些软件包可以为您执行此操作。请进行更多研究并开始编码，然后在遇到特定问题时提出问题。谢谢。你解决了我的问题。

from django.urls import path
from . import views

app_name = 'accounts'
urlpatterns = [
    path('signup/', views.SignUpView.as_view(), name='signup')
]

<div class="modal fade" tabindex="-1" role="dialog" id="modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content"></div>
  </div>
</div>

<button class="signup-btn btn btn-primary" type="button" name="button">Sign up</button>

<script type="text/javascript">
  $(function () {
    // Sign up button
    $(".signup-btn").modalForm({formURL: "{% url 'accounts:signup' %}"});

  });
</script>