Python 在Django中将消息显示为弹出/警报？

我有一个表单，一旦提交，它就会再次重定向到自己。我试图显示一条消息，上面写着“您已进入（工作区）”。目前，我只得到了显示部分，其中没有变量，但在用户提交后，它会显示在html中。我希望它是一个弹出或警告消息，用户可以关闭后，他们看到它，但我不明白这将如何在Django工作

视图.py

class EnterExitArea(CreateView):
    model = EmployeeWorkAreaLog
    template_name = "operations/enter_exit_area.html"
    form_class = WarehouseForm
    #success_message = "You have logged into %(work_area)s"

    def form_valid(self, form):
        emp_num = form.cleaned_data['employee_number']
        area = form.cleaned_data['work_area']
        station = form.cleaned_data['station_number']

        if 'enter_area' in self.request.POST:
            form.save()
            EmployeeWorkAreaLog.objects.filter((Q(employee_number=emp_num) & Q(work_area=area) & Q(station_number=station)).update(time_in=datetime.now())

            messages.info(self.request, "You have entered")
            return HttpResponseRedirect(self.request.path_info)

进入退出区域.html

{% extends "base.html" %}

{% block main %}
    <form id="warehouseForm" action="" method="POST" class="form-horizontal" novalidate >
        {% csrf_token %}

        {% if messages %}
            <ul class="messages">
            {% for message in messages %}
                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
            {% endfor %}
            </ul>
        {% endif %}

        <div>
            <div>
                <label>Employee</label>
                {{ form.employee_number }}
            </div>

            <div>
                <label>Work Area</label>
                {{ form.work_area }}
            </div>
            <div>
                <label>Station</label>
                {{ form.station_number }}
            </div>
        </div>

        <div>
            <div>
                <button type="submit" name="enter_area" value="Enter">Enter Area</button>

            </div>
        </div>
    </form>

{% endblock main %}

{%extends“base.html”%}
{%block main%}
{%csrf_令牌%}
{%if消息%}

{消息%中的消息为%s}
{{message}}
{%endfor%}

{%endif%}
雇员
{{form.employee_number}
工作区
{{form.work_area}}
站
{{form.station_number}
进入区域
{%endblock main%}

它显示如下：

编辑：

---

这更像是一个javascript问题，但无论如何，这就是我处理这个问题的方式（如果您使用的是引导程序）：

1） 创建包含以下内容的

message.html

文件：

{% for message in messages %}
  <div class="toast notification bg-{% if message.tags == 'error' %}danger{% else %}{{message.tags}}{% endif %}" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
    <div class="toast-header">
      <strong class="mr-auto">
        {% if message.tags == 'error' %}
          <i class="fas fa-times mr-2"></i>
        {% elif message.tags == 'warning' %}
          <i class="fas fa-exclamation mr-2"></i>
        {% elif message.tags == 'info' %}
          <i class="fas fa-info mr-2"></i>
        {% elif message.tags == 'success' %}
          <i class="fas fa-check mr-2"></i>
        {% endif %}
        {{message.tags|capfirst}}
      </strong>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      {{message|safe}}
    </div>
  </div>
{% endfor %}

另外，不要忘记包括引导

通过这种方式，您可以在所有模板上使用django消息，而无需显式更改它们

编辑 您还需要此自定义css类，以便在页面的右上角显示通知：

。通知{
位置：绝对位置；
顶部：5雷姆；
右：1rem；
}

您可能想查看jQuery对话框或引导模式，或者只是一个普通的Javascript警报。这很好地解决了问题，我想我可能做了一些奇怪的事情。有两个问题，我是否将脚本添加到base.html中的标记中？我得到的警告是，

$（'.toast'）.toast（'show'）的
未解析函数或方法toast（）
。我现在正在添加一张它在页面上显示的图片。1）是的，将脚本放在
正文
标记中-最后。2） 我认为您缺少bootstrap的
javascript
文件（
bootstrap.min.js
）。它作为
包含在base.html中，但它仍然呈现为我添加到原始帖子中的图像。我有按此顺序排列的脚本，它对我来说工作正常：1）jQuery 2）bootstrap 3）自定义脚本。也许您是在引导或jQuery之前添加自定义脚本？嗯，我在标签中添加了
和我在上面添加的引导脚本，然后在末尾添加您的脚本，根据它们都成功加载的网络
...
{% include 'message.html' %}
...


<!-- and at the end:-->
<script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
{% if messages %}
  <script>
      {% for message in messages %}
          $(document).ready(function () {
              $('.toast').toast('show');
          });
      {% endfor %}
  </script>
{% endif %}