index-materializecss.html

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
  </head>
  <body>
      <!-- Modal Trigger -->
      <a class="waves-effect waves-light btn" href="#modal1">Modal</a>

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

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