在页脚部分内实现模态

Question

我试过了，在页面的页脚部分有一个模式（使用物化css）。单击模式时，它会弹出并显示物化集合。但是一旦我关闭弹出窗口，模态按钮就会冻结，只有当我将光标移到它上面时，它才会恢复原来的颜色。

如图所示，模态按钮看起来处于非活动状态（发白蓝色），如果我将鼠标移到它上面，它会恢复原来的颜色。

这是我的代码：

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

如何解决这个问题？

Answer 1

如本 ISSUE 所述，问题是由 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>

在页脚部分内实现模态

Materialize modal inside footer section

css

materialize