具体化CSS模态不起作用

我正在尝试使用materializecss modal。这是我的代码

<!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>

单击按钮时没有任何反应。模态不显示。控制台中也没有错误。请帮忙。任何帮助将不胜感激。谢谢

您缺少以下代码

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

请在这里找到 plunkr 解决方案：

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

相关内容

最新更新

热门标签：