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中所述，此问题是由于在您的<head>中重复包含了javascript文件而引起的。

删除旧版本以使其正常工作。

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

在页脚内部实现模态

1 个答案: