Materialize Modal不适用于入门模板

Question

Recently i switched to materialize (it's based on Bootstrap i guess) and i'm trying to make modal work. 最近我切换到物化（它是基于我猜的Bootstrap），我正在努力使模态工作。 it just doesn't show up. 它只是没有出现。 the button is there but it triggers nothing. 按钮在那里，但它什么也没有触发。 I'm using starter template from Materialize website. 我正在使用Materialise网站的入门模板。

All i did was copy and paste modal code from Materialize modal page. 我所做的只是从Materialise模态页面复制并粘贴模态代码。 I put the code in starter template but it doesn't work. 我把代码放在启动器模板中，但它不起作用。 i also tested it on another theme based on materialize but that didn't work either. 我也在另一个基于物化的主题上进行了测试但是也没有用。

also jQuery is loaded properly. jQuery也正确加载。

edit: it's index.html 编辑：它是index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
  <title>Starter Template - Materialize</title>

  <!-- CSS  -->
  <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
  <nav class="light-blue lighten-1" role="navigation">
    <div class="container">
      <div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">Logo</a>
        <ul class="right">
          <li><a href="#">Navbar Link</a></li>
        </ul>

        <ul id="nav-mobile" class="side-nav">
          <li><a href="#">Navbar Link</a></li>
        </ul>
        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
      </div>
    </div>
  </nav>
  <div class="section no-pad-bot" id="index-banner">
    <div class="container">
      <br><br>
      <h1 class="header center orange-text">Starter Template</h1>
      <div class="row center">
        <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
      </div>
      <div class="row center">
        <button data-target="#modal1" class="btn modal-trigger">Modal</button>
      </div>
<!-- Modal Structure -->
  <div id="modal1" class="modal modal-fixed-footer">
    <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>
      <br><br>

    </div>
  </div>


  <div class="container">
    <div class="section">

      <!--   Icon Section   -->
      <div class="row">
        <div class="col s12 m4">
          <div class="icon-block">
            <h2 class="center light-blue-text"><i class="mdi-image-flash-on"></i></h2>
            <h5 class="center">Speeds up development</h5>

            <p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block">
            <h2 class="center light-blue-text"><i class="mdi-social-group"></i></h2>
            <h5 class="center">User Experience Focused</h5>

            <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block">
            <h2 class="center light-blue-text"><i class="mdi-action-settings"></i></h2>
            <h5 class="center">Easy to work with</h5>

            <p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
          </div>
        </div>
      </div>

    </div>
    <br><br>

    <div class="section">

    </div>
  </div>

  <footer class="page-footer orange">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <h5 class="white-text">Company Bio</h5>
          <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>


        </div>
        <div class="col l3 s12">
          <h5 class="white-text">Settings</h5>
          <ul>
            <li><a class="white-text" href="#!">Link 1</a></li>
            <li><a class="white-text" href="#!">Link 2</a></li>
            <li><a class="white-text" href="#!">Link 3</a></li>
            <li><a class="white-text" href="#!">Link 4</a></li>
          </ul>
        </div>
        <div class="col l3 s12">
          <h5 class="white-text">Connect</h5>
          <ul>
            <li><a class="white-text" href="#!">Link 1</a></li>
            <li><a class="white-text" href="#!">Link 2</a></li>
            <li><a class="white-text" href="#!">Link 3</a></li>
            <li><a class="white-text" href="#!">Link 4</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
      Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
      </div>
    </div>
  </footer>


  <!--  Scripts-->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="js/materialize.js"></script>
  <script src="js/init.js"></script>
  <script> $(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();
  });</script>

  </body>
</html>

modal code: 模态代码：

<!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" 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>

Here's a demo of Starter template 这是Starter模板的演示

Here's download link of template 这是模板的下载链接

Answer 1

In the version v0.97.8 (October 30th, 2016) modal plugin has been refactored according to the updates from github . 在版本v0.97.8（2016年10月30日）中，模式插件已根据github的更新进行了重构。 Now, the initialization of the plugin is done differently, like in the example below. 现在，插件的初始化以不同方式完成，如下例所示。

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

I think you forgot to attach the plugin to the button. 我想你忘了将插件附加到按钮上。

$(document).ready(function() {
  $('.modal-trigger').leanModal();
});

Also change this line data-target="#modal1" 同时更改此行data-target="#modal1"

<button data-target="#modal1" class="btn modal-trigger">Modal</button>

In to this line data-target="modal1" , you inserted # by mistake, a loudy error noticed me in console. 在这行data-target="modal1" ，你错误地插入了# ，一个响亮的错误在控制台中发现了我。

<button data-target="modal1" class="btn modal-trigger">Modal</button>

See the snippet below for working example. 有关工作示例，请参阅下面的代码段。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script> <nav class="light-blue lighten-1" role="navigation"> <div class="container"> <div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">Logo</a> <ul class="right"> <li><a href="#">Navbar Link</a></li> </ul> <ul id="nav-mobile" class="side-nav"> <li><a href="#">Navbar Link</a></li> </ul> <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a> </div> </div> </nav> <div class="section no-pad-bot" id="index-banner"> <div class="container"> <br><br> <h1 class="header center orange-text">Starter Template</h1> <div class="row center"> <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5> </div> <div class="row center"> <button data-target="modal1" class="btn modal-trigger">Modal</button> </div> <!-- Modal Structure --> <div id="modal1" class="modal modal-fixed-footer"> <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> <br><br> </div> </div> <div class="container"> <div class="section"> <!-- Icon Section --> <div class="row"> <div class="col s12 m4"> <div class="icon-block"> <h2 class="center light-blue-text"><i class="mdi-image-flash-on"></i></h2> <h5 class="center">Speeds up development</h5> <p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p> </div> </div> <div class="col s12 m4"> <div class="icon-block"> <h2 class="center light-blue-text"><i class="mdi-social-group"></i></h2> <h5 class="center">User Experience Focused</h5> <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p> </div> </div> <div class="col s12 m4"> <div class="icon-block"> <h2 class="center light-blue-text"><i class="mdi-action-settings"></i></h2> <h5 class="center">Easy to work with</h5> <p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p> </div> </div> </div> </div> <br><br> <div class="section"> </div> </div> <footer class="page-footer orange"> <div class="container"> <div class="row"> <div class="col l6 s12"> <h5 class="white-text">Company Bio</h5> <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p> </div> <div class="col l3 s12"> <h5 class="white-text">Settings</h5> <ul> <li><a class="white-text" href="#!">Link 1</a></li> <li><a class="white-text" href="#!">Link 2</a></li> <li><a class="white-text" href="#!">Link 3</a></li> <li><a class="white-text" href="#!">Link 4</a></li> </ul> </div> <div class="col l3 s12"> <h5 class="white-text">Connect</h5> <ul> <li><a class="white-text" href="#!">Link 1</a></li> <li><a class="white-text" href="#!">Link 2</a></li> <li><a class="white-text" href="#!">Link 3</a></li> <li><a class="white-text" href="#!">Link 4</a></li> </ul> </div> </div> </div> <div class="footer-copyright"> <div class="container"> Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a> </div> </div> </footer> <script> $(document).ready(function() { // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered $('.modal-trigger').leanModal(); }); </script>

Answer 2

For updated code you should initialize 对于更新的代码，您应该初始化

$(document).ready(function() {
  $('.modal').modal();
});

Materialize Modal不适用于入门模板

问题描述

2 个解决方案

解决方案1
32 已采纳 2015-04-12 10:33:18

解决方案2
6 2016-12-27 08:29:07

Materialize Modal不适用于入门模板

问题描述

2 个解决方案

解决方案1 32 已采纳 2015-04-12 10:33:18

解决方案2 6 2016-12-27 08:29:07

解决方案1
32 已采纳 2015-04-12 10:33:18

解决方案2
6 2016-12-27 08:29:07