MaterializeCSS modal is opened without any click event
<p>I have used the same example from materializecss <a href="http://materializecss.com/modals.html" rel="nofollow noreferrer">modal</a>.</p>

<p>The problem here modal is opened before the click event from anchor.</p>

<pre><code>&lt;a class="modal-trigger" href="#modal1"&gt;Specialization&lt;/a&gt;
&lt;div id="modal1" class="modal"&gt;
  &lt;div class="modal-content"&gt;
    &lt;h4&gt;Modal Header&lt;/h4&gt;
    &lt;p&gt;A bunch of text&lt;/p&gt;
  &lt;/div&gt;&lt;/div&gt;
</code></pre>

<p>I have added the JavaScript code :</p>

<pre><code>$(document).ready(function(){
      // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
      $('.modal-trigger').leanModal({
          dismissible: true, // Modal can be dismissed by clicking outside of the modal
          opacity: .5, // Opacity of modal background
          in_duration: 300, // Transition in duration
          out_duration: 200, // Transition out duration
      });
});
</code></pre>

<p>1st image is where modal opens up before the modal-trigger event
<a href="https://i.stack.imgur.com/IOuo5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IOuo5.png" alt="1st image is where modal opens up before the modal-trigger event"></a>
2nd image on click event of modal-triger</p>

<p><a href="https://i.stack.imgur.com/6Ixkq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6Ixkq.png" alt="enter image description here"></a></p>