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

Question

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

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

我想在Django中创建弹出式表单。我搜索了许多网站，但找不到解决方案，请 在此处输入图片描述

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

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

Answer 1

为什么不使用引导模态呢？

例如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
$ cd examples
$ python manage.py runserver

Bootstrap模态中的注册表单有关代码的所有部分如何协同工作的解释，请参见“用法”一节。为了测试此处介绍的工作解决方案，请克隆并运行示例。表格

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

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

基本原则是：

• 弹出窗口变暗div，覆盖 100% 的视口。它有显示none。

• 当按钮被点击时，弹出的div的显示属性设置为 block

• 弹出 div 可以位于主站点内容之外。它可以通过absolute定位来做到这一点。

正如其他人所说，查看一些提供模态的框架，例如bootstrap和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>