Материализует модал не открывается - PullRequest
Новая
       8

Материализует модал не открывается

0 голосов
/ 03 января 2019

Модал материализации не появляется даже после того, как я выполнил шаги, упомянутые в документации материализации.В консоли $ (...) modal не происходит ошибка функции.

Я попытался изменить последовательность загрузок скриптов, но ни одна из них, похоже, не работает 

<!DOCTYPE html>
<html>

<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
  rel="stylesheet">


<!-- Compiled and minified CSS -->
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com
/ajax/libs/materialize/1.0.0/css/materialize. 
min.css">

<!-- Compiled and minified JavaScript -->


<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" 
href="#modal1">Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-close waves-effect waves-green btn- 
flat">Agree</a>
    </div>
</div>


<!--JavaScript at end of body for optimized loading-->
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js
/materialize.min.js"></script>

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256- 
DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous">
</script>

</body>


<script>
$(document).ready(function () {
    $('.modal').modal();
});
</script>

</html>

Модальный должен отображаться, но не отображается

1 Ответ

0 голосов
/ 03 января 2019

Вот рабочая демонстрация,

, вам нужно импортировать jquery, прежде чем materialize.js 

$(document).ready(function () {
    $('.modal').modal();
});
<!DOCTYPE html>
<html>

<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
  rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256- 
DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous">
</script>

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js
/materialize.min.js"></script>

<body>

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" 
href="#modal1">Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-close waves-effect waves-green btn- 
flat">Agree</a>
    </div>
</div>



</body>

</html>
...