title: Full screen modal in materialize design
body: <p>I am using Materialize design. And i am implementing full screen modal. Width is spend in full screen but height is not set in full screen. I have seen one link then i want to implement like this. If any plugin and any other solution, Then let me know.
  <a href="http://joaopereirawd.github.io/animatedModal.js/" rel="nofollow">http://joaopereirawd.github.io/animatedModal.js/</a> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
      // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
      $('.modal-trigger').leanModal();
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"&gt;
  
    &lt;!-- Compiled and minified JavaScript --&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"&gt;&lt;/script&gt;
  
  
  &lt;a class="waves-effect waves-light btn modal-trigger" href="#modal1"&gt;Modal&lt;/a&gt;
  
    &lt;!-- Modal Structure --&gt;
    &lt;div id="modal1" class="modal" style="width:100%;height:100%"&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>
  </div>
  </div>
  </p>
  
  <p>I don't want to same as link(animation). But i want to implement opened modal cover full screen.</p>