我想在我的项目中创建 django 弹出表单 [关闭]

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
$ 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 文件，包含模态、触发元素和实例化模态表单的脚本

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