Search code examples
javascripthtmlcssmaterialize

Materialize CSS Modal

I have implemented the Materialize CSS modal in the following way, but it does not work.

ERROR:

    Uncaught TypeError: $(...).modal is not a function
    at HTMLDocument.<anonymous> (ordine.php:70)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)


$(document).ready(function () {
    $('.modal').modal();
});
  <!--MODAL -->
  <a class='waves-effect waves-light btn blue modal-trigger' href='#modal1'><i class='fas fa-shopping-cart'></i></a>
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>
  <!-- MONDAL -->

Solution

  • You had an error $ is not defined. This error says that jQuery isn't defined.

    You must include it, here's the CDN

      <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    Here's a working fiddle : https://jsfiddle.net/4t25mdba/1/