CODEWITHSUNDEEP
htmlmaterial-designmaterialize
Vikhyath Maiya
Vikhyath Maiya

Reputation: 3202

materializecss modal not working

I am trying to use materializecss modal.Here is my code

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="utf-8">
      <title>Untitled Document</title>
      <!-- Compiled and minified CSS -->
      <script src="../javascripts/jquery2.1.3/jquery.min.js"></script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

    
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
  
      
      </head>
   <body>
     <!-- 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>
          
      
      
       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
  
   </body>
</html>

On clicking the button nothing happens.The modal doesnt show up.And there is no error in the console as well.Please help.Any help would be appreciated.Thank you

Upvotes: 0

Views: 922

Answers (1)

Younis Ar M
Younis Ar M

Reputation: 941

You are missing the below code 

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

Please find plunkr solution here :

https://plnkr.co/edit/oaX6jCeO1Q8Rdj28rL6y?p=preview

Upvotes: 1

Related Questions