Fatal编程技术网
  • javascript/
  • Javascript 使用“关闭”按钮弹出渲染，但在单击时不起作用？

Javascript 使用“关闭”按钮弹出渲染，但在单击时不起作用？

javascript python html django

Javascript 使用“关闭”按钮弹出渲染，但在单击时不起作用？,javascript,python,html,django,Javascript,Python,Html,Django,我有一个自定义弹出窗口，在表单提交时显示，让用户知道它是成功的。目前，它显示的时候它应该（虽然我不能得到它显示在中间的右上，但这是一个小问题）如下所示： 但是小X按钮实际上并没有关闭消息。你可以点击它，但它什么也不做，如果你重新加载页面，它就会消失，直到你再次提交 base.html {% load static purchasing_tags humanize %} {% include 'operations/message.html' %} <!DOCTYPE html>

我有一个自定义弹出窗口，在表单提交时显示，让用户知道它是成功的。目前，它显示的时候它应该（虽然我不能得到它显示在中间的右上，但这是一个小问题）如下所示：

但是小X按钮实际上并没有关闭消息。你可以点击它，但它什么也不做，如果你重新加载页面，它就会消失，直到你再次提交

base.html

{% load static purchasing_tags humanize %}
{% include 'operations/message.html' %}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="{% static 'images/favicon.ico' %}" type="image/x-icon" rel="shortcut icon"/>
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="{% static "css/plugins/bootstrap.min.css" %}" rel="stylesheet">
    <link href="{% static "css/apps.css" %}" rel="stylesheet">

    <script src="{% static "js/plugins/jquery.js" %}"></script>
    <script src="{% static "js/plugins/bootstrap.min.js" %}"></script>

    <!--[if lt IE 9]>
    <script src="{% static 'js/plugins/respond.js' %}"></script>
    <![endif]-->
</head>
<body>
    <div id="login" class="panel panel-default">
        <div class="panel-body">
            {% block main %}
            {% endblock main %}
        </div>
        <div class="panel-footer">
            {% block panel_footer %}
            {% endblock %}
        </div>
    </div>

    {% if messages %}
    <script>
      {% for message in messages %}
          $(document).ready(function () {
              $('.toast').toast('show');
          });
      {% endfor %}
    </script>
    {% endif %}
</body>

{% extends "base.html" %}
{% load core_tags %}

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

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

{% for message in messages %}
  <div style="position: absolute" class="toast bg-{% if message.tags == 'error' %}danger{% else %}{{message.tags}}{% endif %}" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
    <div>
      <strong class="mr-auto">
        {{message.tags|capfirst}}
      </strong>
      <button type="button" class="ml-2 mb-1 close" aria-label="Close">
        <span aria-hidden="true" data-dismiss="toast">&times;</span>
      </button>
    </div>
    <div>
      {{message|safe}}
    </div>
  </div>
{% endfor %}
message.html

{% load static purchasing_tags humanize %}
{% include 'operations/message.html' %}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="{% static 'images/favicon.ico' %}" type="image/x-icon" rel="shortcut icon"/>
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="{% static "css/plugins/bootstrap.min.css" %}" rel="stylesheet">
    <link href="{% static "css/apps.css" %}" rel="stylesheet">

    <script src="{% static "js/plugins/jquery.js" %}"></script>
    <script src="{% static "js/plugins/bootstrap.min.js" %}"></script>

    <!--[if lt IE 9]>
    <script src="{% static 'js/plugins/respond.js' %}"></script>
    <![endif]-->
</head>
<body>
    <div id="login" class="panel panel-default">
        <div class="panel-body">
            {% block main %}
            {% endblock main %}
        </div>
        <div class="panel-footer">
            {% block panel_footer %}
            {% endblock %}
        </div>
    </div>

    {% if messages %}
    <script>
      {% for message in messages %}
          $(document).ready(function () {
              $('.toast').toast('show');
          });
      {% endfor %}
    </script>
    {% endif %}
</body>

{% extends "base.html" %}
{% load core_tags %}

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

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

{% for message in messages %}
  <div style="position: absolute" class="toast bg-{% if message.tags == 'error' %}danger{% else %}{{message.tags}}{% endif %}" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
    <div>
      <strong class="mr-auto">
        {{message.tags|capfirst}}
      </strong>
      <button type="button" class="ml-2 mb-1 close" aria-label="Close">
        <span aria-hidden="true" data-dismiss="toast">&times;</span>
      </button>
    </div>
    <div>
      {{message|safe}}
    </div>
  </div>
{% endfor %}