Search code examples
javascriptmaterialize

materialize model not working

I was looking through the docs of materializecss. But the modal seems not working. I just used the code that was in the docs http://materializecss.com/modals.html

Html

<!-- Modal Trigger -->
  <a class="waves-effect waves-light btn" href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <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-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>

JS

  $(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
     $('#modal1').modal('open');
  });

I had put a pen as well

Codepen link

Solution

  • According to the docs - initialising .modal() allows on-click to function properly on the anchor.

    $('#modal1').modal()

    you'll get the modal to show onclick - (trying to debug for on ready)

    --- update ---
    on Codepen, there's a weird delay: I got it work in $(document).ready by using

    $('#modal1').modal().modal('open');

    (It's not an elegant solution, but it seems to work);

    CODEPEN