$(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>
Скриншот:
Триггеры
Модальные
@NishargShah Я обновляю это
не могли бы вы создать демонстрацию вашей проблемы?
@NishargShah Хорошо, я добавил один, но я знаю, почему возникает проблема .. проверьте мой ответ ниже и спасибо за ваше время
Я рад узнать, что ваша проблема решена
Проблема в том, что я использовал средство выбора даты и времени из этого репозитория https://github.com/fawadtariq/materialize-datetimepicker и я думаю, что разработчик добавил строку в конце скрипта, которая делает всю проблему
линия :
$('html > head').append($('<style>div.modal-overlay { pointer-events:none; }</style>'));
где html и css?