为什么不使用引导模式呢？
例如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>

使用弹出窗口/模态窗口最好使用框架，因为它们提供了简单的构建。试图在一个页面上手工编写许多模态窗口可能会很费力。但如果你必须这样做，这里有一个single popup example，我用普通的html，css和javascript编写的。
其基本原则是：

• 弹出窗口为灰色div，覆盖100%的视口。其显示为none。
• 单击该按钮时，弹出式div的display属性将设置为block
• popup 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>