我想在我的项目中创建 Django 弹出窗体

Question

我已经在 django 中创建了费用管理系统。

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

我想在 Django 中创建弹出表单。我已经搜索了很多网站，但找不到解决方案 enter image description here

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

谁能告诉我如何解决这个问题？如果您在同一地区工作，或者共享代码。

Answer 1

为什么不使用 bootstrap 模态呢？

例如https://pypi.org/project/django-bootstrap-modal-forms/

例子要查看 django-bootstrap-modal-forms 的运行情况，请克隆存储库和运行本地示例：

$ 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

from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User
from bootstrap_modal_forms.mixins import PopRequestMixin, CreateUpdateAjaxMixin


class CustomUserCreationForm(PopRequestMixin, CreateUpdateAjaxMixin,
                             UserCreationForm):
    class Meta:
        model = User
        fields = ['username', 'password1', 'password2']

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>

views.py

from django.contrib.messages.views import SuccessMessageMixin
from django.urls import reverse_lazy
from django.views import generic
from bootstrap_modal_forms.mixins import PassRequestMixin
from .forms import CustomUserCreationForm

class SignUpView(PassRequestMixin, SuccessMessageMixin, generic.CreateView):
    form_class = CustomUserCreationForm
    template_name = 'accounts/signup.html'
    success_message = 'Success: Sign up succeeded. You can now Log in.'
    success_url = reverse_lazy('index')

urls.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>

Answer 2

使用 popups/modals 最好使用框架来完成，因为它们提供了简单的构建。尝试在单个页面上手动编写多个模式可能很费力。但是如果你必须的话，这里有一个 single popup example 我用原版 html、css 和 javascript.

编码的

基本原则是：

弹出窗口是一个暗淡的 div，它覆盖了 100% 的视口。它有显示 none.
点击按钮时，弹窗div的显示属性设置为block
弹出窗口 div 可以位于主站点内容之外。它可以通过 absolute 定位来做到这一点。

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

var popup1 = document.getElementById("popup-1")
var openPopup1 = document.getElementById("open-popup-1")
var closePopup1 = document.getElementById('close-popup-1')

openPopup1.addEventListener('click', () => {
 popup1.style.display = "block";
})

closePopup1.addEventListener('click', () => {
 popup1.style.display = "none";
})

body {
 font-family: arial;
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.main-site {
 padding-top: 5px;
 width: 95%;
 max-width: 960px;
 margin: 0 auto;
}

#popup-1 {
 display: none;
 background-color: rgba(0,0,0,0.5);
 position: absolute;
 height: 100vh;
 width: 100%;
}

.popup-content {
 position: relative;
 padding: 20px;
 margin: 0 auto;
 background-color: white;
 width: 400px;
 top: 5vh;
}

<div id="popup-1">
 <div class="popup-content">
  <h1>Popup Title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <button id="close-popup-1">Close</button>
 </div>
</div>

<div class="main-site">
 <h1>Webpage</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <button id="open-popup-1">Open Popup</button>
</div>

我想在我的项目中创建 Django 弹出窗体

I want to create django popup form in my project

python

forms

django

popup