Материализовать модальные внутри нижнего колонтитула - PullRequest
Новая
       10

Материализовать модальные внутри нижнего колонтитула

0 голосов
/ 29 июня 2018

Я пытался, имея модальное внутри раздела нижнего колонтитула страницы (с использованием materialize css). При нажатии на модальное окно, оно всплывает и показывает материализованную коллекцию. Но как только я закрываю всплывающее окно, модальную кнопку, вроде как зависает, и только если я наведу на него курсор, он вернет ему исходный цвет. The Modal button is not its original color(blue)

Как и на картинке, модальная кнопка выглядит так, как будто она неактивна (беловато-синий цвет), и если я наведу на нее мышь, она вернется к своему первоначальному цвету.

Вот мой код: 

$(document).ready(function() {
  $('#modal1').modal();
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

<footer class="page-footer black">
  <div class="row">
    <div class="col s1 m1">
      <div class="footer-copyright">
        <div class="container" id="copyright">
          © copyright text
        </div>
      </div>
    </div>
    <div class="col s11 m11">
      <!-- <div class="row" id="modal"> -->
      <a class="waves-effect blue waves-light btn modal-trigger" href="#modal1">Modal</a>
      <div id="modal1" class="modal bottom-sheet">
        <div class="modal-content">
          <div class="collection">
            <h2 style="color:black;">Text Analysis</h2>
            <a href="#!" class="collection-item">item 1</a>
            <a href="#!" class="collection-item">item 2</a>
            <a href="#!" class="collection-item">item3</a>
          </div>
          <div class="modal">
            <a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>

Как мне исправить этот глюк?

1 Ответ

0 голосов
/ 29 июня 2018

Как указано в этом ВЫПУСКЕ , проблема заключается в двойном включении файлов JavaScript в ваш <head>.

Удалите старую версию, чтобы она заработала. 

<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
...