Materialise Modal overlay не закрывается

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

Материализовать модальное наложение, не закрывая.. когда я нажимаю на триггер, он открывается, но не закрывается, если я нажимаю на наложение, и я могу щелкнуть основные элементы за наложением и модальным без закрытия наложения.. хотя я закрываю его, когда я открываю консоль и вызываю клик для элемента наложения.

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

Скриншот:

Триггеры

Модальные

где html и css?

— 18.12.2020 18:03

@NishargShah Я обновляю это

— 18.12.2020 21:14

не могли бы вы создать демонстрацию вашей проблемы?

— 19.12.2020 10:18

@NishargShah Хорошо, я добавил один, но я знаю, почему возникает проблема .. проверьте мой ответ ниже и спасибо за ваше время

— 19.12.2020 11:58

Я рад узнать, что ваша проблема решена

— 19.12.2020 19:33

html css frontend materialize

18.12.2020 16:47

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Раскрытие чувствительных данных

Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...

Разница между тегами Br и Wbr в HTML 5

В целом, оба тега <br> и <wbr> имеют свои уникальные цели и функциональные возможности, и их использование зависит от конкретных требований к дизайну...

HTML И VS CODE Для Веб-разработки

Прежде чем начать кодировать html в "VS CODE", мы должны сначала создать папку и назвать ее x.html, здесь я принимаю x как имя файла, который мы...

Как использовать WAI-ARIA

В моем текущем новом проекте почти все компоненты не учитывают веб-доступность. Моя нынешняя компания - это стартап, поэтому они не заботились о...

Статическая веб-страница, созданная с помощью CSS и HTML - до и не до.

Я потратил некоторое время на создание своего сайта-портфолио. Затем, гордясь собой, я разместил свой код на серверах amazon. Мне потребовалось время,...

216

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в том, что я использовал средство выбора даты и времени из этого репозитория https://github.com/fawadtariq/materialize-datetimepicker и я думаю, что разработчик добавил строку в конце скрипта, которая делает всю проблему

линия :

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

19.12.2020 11:57

Другие вопросы по теме

Предотвращение роста элемента td для соответствия дочерним элементам

Как заставить навигационные вкладки прокручиваться горизонтально в bootstrap 3?

Ссылки в мобильном меню (<ul> <li a>) не работают при использовании события touchend вместо события click в JavaScript

Проблемы с загрузкой - размер строки карты не изменяется при добавлении полей

Django - файл CSS не работает. Получение ошибки 404. "Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найдено)"

Как я могу уменьшить родительский div до размера его дочернего элемента?

Javascript Показать/Скрыть текст

Создание трех точек по вертикали с интервалом и выравнивание их

Проверьте, пуста ли текстовая область или нет, кроме заполнителя

Как показать скрытый элемент вместе с анимацией при прокрутке полосы прокрутки окон?

Materialise Modal overlay не закрывается

Ответы 1

Другие вопросы по теме

Похожие вопросы