Search code examples
materialize

Materialize Create and Open Modal

I wan't to create a Modal with Materialize and Open it with a Button click. I used the code from the Modal page but it is somehow not working. Maybe someone can help.

I know some guys posted a similar question but none of them is answering my question.

Solution

  • For the modal example to work with a button to trigger the modal you'll need initialize the button using JavaScript. Be sure that you have included both jQuery, and both JavaScript and CSS from materialize—see the getting started guide.

    To initialize the modal (or all modals) you'll invoke the leanModal() method on it:

    $(document).ready(function(){
  $('.modal-trigger').leanModal();
});

    The "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered.

    Example modal button:

    <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Click to open modal</a>

    This button would open a modal with the id modal1.

    See this code pen for a working example.