Search code examples
cssmaterialize

Materialize modal inside footer section

I tried, having a modal inside a footer section of a page (using materialize css). On clicking the modal, it pops up and shows a materialize collection. But once I close the pop up, the modal button , sort of freezes , and only if i move my cursor over it , it regains it original color.The Modal button is not its original color(blue)

As in the image, the modal button looks like it's inactive(whitish blue color) and if I move my mouse over it, it regains its original color.

Here's my code:

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

How do I rectify this glitch?

Solution

  • As stated in this ISSUE, the issue is given by the double inclusion of javascript files in your <head>.

    Remove the older version in order to make it work..

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