Question

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

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

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

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

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

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模式下的注册表单有关代码的所有部分如何协同工作的说明，请参见用法。为了测试此处介绍的工作解决方案，请克隆并运行示例。 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

使用弹出式窗口/模式最好与框架一起使用，因为它们易于构建。尝试手动在单个页面上编写许多模式的代码可能很麻烦。但是，如果必须的话，这是一个single popup example，我用香草html，css和javascript编码。

基本原理是：

弹出窗口是变暗的div，覆盖了100％的视口。它显示为none。
单击按钮时，弹出div的display属性设置为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>

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

2 个答案: