Materialise Modal 覆盖不关闭

Question

$(document).ready(function () {
  $('.modal').modal();

  $('.fixed-action-btn').floatingActionButton();


});

<!DOCTYPE html>
<html lang="{% trans 'en' %}" dir="{% trans 'ltr' %}">

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>{% block title %} {% trans 'ARAB TECH' %} {% endblock %} | {% trans 'SMART CRM' %}</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
          <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    {% comment "test" %}
    # RTL css file
    {% endcomment %}

</head>

<body>
<div id='main-div'>
    <nav class="nav">
        <div class="nav-wrapper teal ">
            <a href="{% url 'home' %}" class="brand-logo valign-wrapper">
                <img class="logo-pic" src="{% static 'images/logo.png' %}" alt="{% trans 'SMART CRM Logo' %}"
                    width="70px">
            </a>
            <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i
                    class="material-icons grey-text text-darken-4 ">menu</i></a>
            <ul class=" hide-on-med-and-down row center-align">
                <li class="col s2"></li>
                <li class="col s2"><a href="{% url 'clients-list' %}">{% trans 'Clients'%}</a></li>
                <li class="col s2"><a href="{% url 'tasks-list' %}">{% trans 'Tasks' %}</a></li>
                <li class="col s2"><a href="{% url 'visits-list' %}">{% trans 'Visits' %}</a></li>
                <li class="col s3">
                    <a href="{% url 'profile' %}" class="row">
                        <div class="col s10">
                            <span class="black-text">
                                {{user}}
                            </span>
                        </div>
                        <div class="col s2">
                            <img src="{{user.get_pic}}" alt="" class="circle responsive-img" style="margin-top: 6px;">
                        </div>
                    </a>
                </li>
            </ul>

        </div>
    </nav>

    <ul class="sidenav blue-grey lighten-5 right" id="mobile-demo">
        <li class="center-align">
        <br>
            <img class="no-margin circle " src="{{user.get_pic}}" height="180">
            <a href="{% url 'profile' %}">

                <div class="">
                    <span class="black-text">
                        {{user}}
                    </span>
                </div>
            </a>
            <hr>
        </li>
        <li class="">

        </li>
        <li>
        </li>
        <li>
            <ul class="">

                <li class='pad-3'><a class="blue-text text-darken-2 hoverable" href="{% url 'clients-list' %}">{% trans 'Clients'%}</a></li>
                <li class='pad-3'><a class="blue-text text-darken-2 hoverable" href="{% url 'tasks-list' %}">{% trans 'Tasks' %}</a></li>
                <li class='pad-3'><a class="blue-text text-darken-2 hoverable" href="{% url 'visits-list' %}">{% trans 'Visits' %}</a></li>


            </ul>
        </li>
        <br>

        <li class="nav-wrapper">
            <hr style="margin-bottom: 0px;">
            <form class="red lighten-1" action="{% url 'search' %}" method="GET">
                <div class="input-field" style="margin: 0px;">
                    <input name="search" id="search" type="search" placeholder="Search" required>
                    <label class="label-icon" for="search"><i class="material-icons" style="margin-top: 26px;">{% trans 'search'%}</i></label>
                    <i class="material-icons" style="margin-top: 25px;">close</i>
                </div>
            </form>
            <hr style="margin-top: 0px;">
        </li>
        <br>
        <br>
        <li>
            <a class=" btn waves-effect waves-teal" href="#">
                <i class="material-icons">shopping_cart</i>[<span id="cart-count">0</span>] {% trans 'Notifications'%}
            </a>
        </li>
        <li>
            <a class=" btn waves-effect  blue darken-2 waves-teal" href="{% url 'profile' %}">
                <i class="material-icons">person_outline</i>{% trans 'Profile' %}</a>
        </li>
    </ul>


    {% block content %}

    {% endblock content %}


    <div class="fixed-action-btn">
        <a class="btn-floating btn-large yellow">
            <i class="large material-icons">mode_edit</i>
        </a>
        <ul>
            <li><a href="#clientform" class="btn-floating btn green modal-trigger"><i class="material-icons">person_add</i></a></li>
            <li><a href="#taskform" class="btn-floating btn green modal-trigger"><i class="material-icons">add_box</i></a></li>
            <li><a href="#managementtaskform" class="btn-floating btn green modal-trigger"><i class="material-icons">group_work</i></a></li>
        </ul>
    </div>



    <div id="addquickform" class="modal bottom-sheet ">
            <div class="modal-content">
                <form class="container" method="post" action="{% url 'addquicklink' %}">

                <h4 class="center-align">{% trans 'Add Quick Link'%} <a href="#!" class="modal-close red-text {% trans 'right'%}"><i class="material-icons">close</i></a></h4>
                {% csrf_token %}
                {% get_quick_form as quickform %}
                {{ quickform|materializecss }}
                <button type="submit" value="submit" class="waves-effect green waves-teal btn-flat center-align">{% trans 'Submit'%}</button>
                <a href="#!" class="modal-close waves-effect waves-red btn-flat red lighten-1">Close</a>
                </form>
            </div>
            <div class="modal-footer"></div>
    </div>

    <div id="clientform" class="modal bottom-sheet">
        <form method="post" action="{% url 'submit-client' %}" class="container">
            <div class="modal-content ">
                <h4 class="center-align">{% trans 'Add Client'%} <a href="#!" class="modal-close red-text {% trans 'right'%}"><i class="material-icons">close</i></a></h4>
                {% csrf_token %}
                {% get_client_form user as clientform %}
                {{ clientform|materializecss }}
            </div>
            <div class="modal-footer">
                <button type="submit" value="submit" class=" waves-effect green waves-teal btn-flat center-align">{% trans 'Submit'%}</button>
                <a href="#!" class="modal-close waves-effect waves-red btn-flat red lighten-1">Close</a>
            </div>
        </form>
    </div>

    <div id="taskform" class="modal bottom-sheet">
            <div class="modal-content ">
                <h4 class="center-align">{% trans 'Add Task'%} <a href="#!" class="modal-close red-text {% trans 'right'%}"><i class="material-icons">close</i></a></h4>
                <p>
                <form method="post" action="{% url 'submit-task' %}" class="">
                {% csrf_token %}
                {% get_task_form user as taskform %}
                {{ taskform|materializecss }}
                <button type="submit" value="submit" class=" waves-effect green waves-teal btn-flat center-align">{% trans 'Submit'%}</button>
                <a href="#!" class="modal-close waves-effect waves-red btn-flat red lighten-1">{% trans 'Close'%}</a>
           
                </form>
                </p>
            </div>
    </div>
    </div>

    <!-- End Modals AREA -->
    
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    


    <script>
        // Handle Messages With Materialize Toast
        {% if messages %}
        {% for message in messages %}
        M.toast({ html: '{{message|safe}}', classes: 'rounded {{message.tags}}', displayLength: 5000 });
        {% endfor %}
        {% endif %}

    </script>


</body>

</html>

Materialize Modal overlay, not closing ..当我点击触发器时它是打开的但是如果我点击覆盖它不会关闭，我可以点击后面的主要元素覆盖和模式没有关闭覆盖..虽然我在打开控制台时关闭它并调用覆盖元素点击。

<div class="fixed-action-btn">
 <a class="btn-floating btn-large yellow">
  <i class="large material-icons">mode_edit</i>
 </a>
 <ul>
  <li><a href="#clientform" class="btn-floating btn green modal-trigger"><i class="material-icons">person_add</i></a></li>
  <li><a href="#taskform" class="btn-floating btn green modal-trigger"><i class="material-icons">add_box</i></a></li>
  <li><a href="#managementtaskform" class="btn-floating btn green modal-trigger"><i class="material-icons">group_work</i></a></li>
 </ul>
</div>


<div id="addquickform" class="modal bottom-sheet ">
 <div class="modal-content">
  <form class="container" method="post" action="{% url 'addquicklink' %}">
   <h4 class="center-align">{% trans 'Add Quick Link'%} <a href="#!" class="modal-close red-text {% trans 'right'%}"><i class="material-icons">close</i></a></h4>
   {% csrf_token %}
   {% get_quick_form as quickform %}
   {{ quickform|materializecss }}
   <button type="submit" value="submit" class="waves-effect green waves-teal btn-flat center-align">{% trans 'Submit'%}</button>
   <a href="#!" class="modal-close waves-effect waves-red btn-flat red lighten-1">Close</a>
  </form>
 </div>
 <div class="modal-footer"></div>
</div>

<div id="clientform" class="modal bottom-sheet">
 <form method="post" action="{% url 'submit-client' %}" class="container">
  <div class="modal-content ">
   <h4 class="center-align">{% trans 'Add Client'%} <a href="#!" class="modal-close red-text {% trans 'right'%}"><i class="material-icons">close</i></a></h4>
   {% csrf_token %}
   {% get_client_form user as clientform %}
   {{ clientform|materializecss }}
  </div>
  <div class="modal-footer">
   <button type="submit" value="submit" class=" waves-effect green waves-teal btn-flat center-align">{% trans 'Submit'%}</button>
   <a href="#!" class="modal-close waves-effect waves-red btn-flat red lighten-1">Close</a>
  </div>
 </form>
</div>

截图：

触发器

模态框

Answer 1

问题是我使用了这个 repo 中的日期时间选择器 https://github.com/fawadtariq/materialize-datetimepicker 而且我认为开发人员在脚本末尾添加了一行，导致了整个问题

行：

$('html > head').append($('<style>div.modal-overlay { pointer-events:none; }</style>'));

Materialise Modal 覆盖不关闭

Materialize Modal overlay not closing

html

css

frontend

materialize