Materialize Create and Open Modal

Question

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.

Comments

[Ben]

@Micheal Hi Michael, I am sorry i haven't seen your answer. But it is correct i solved it the same way. Thanks

[vimal kumar]

While trying this am getting error leanModal is not defined

[Michael]

@vimalkumar in the codepen I linked to or your own code? (the codepen runs fine, just tested it)