Question

我正在使用设计 Material Design 。我选择在卡片中使用旧的FAB来显示由不同类型的对象组成的内容。现在，我尝试使用它添加模态底部样式，并使用浮动操作按钮作为模态的触发器，但下面没有任何内容。我的代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>   
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>    
</head>
<body>
    <div class="row">
        <div class="col s12 m4 l4">
          <div class="card">
            <div class="card-image">
              <img src="http://materializecss.com/images/sample-1.jpg">

              <a class="btn-floating btn-large halfway-fab  light-green accent-3" href="#modal2"><i class="material-icons">add</i></a>
            </div>
            <div class="card-content">
                <span class="card-title">Card Title</span>
              <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
            </div>
          </div>
        </div>
    </div>
    <!-- Modal Structure -->
    <div id="modal2" class="modal bottom-sheet">
        <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>   
</body>
</html>

<script type="text/javascript">
    $(document).ready(function() {
        $('.modal').modal();
    });
</script>

Answer 1

在Materialise中，您可以使用href="#modal2" - 而不是data-modal来引用模式。试试吧。

Src：http://materializecss.com/modals.html

Answer 2

必须在jquery-2.1.1.min.js库之前添加

materialize.min.js库。

试试这段代码;

＆＃13;

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

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>   
</head>
<body>
    <div class="row">
        <div class="col s12 m4 l4">
          <div class="card">
            <div class="card-image">
              <img src="http://materializecss.com/images/sample-1.jpg">

              <a class="btn-floating btn-large halfway-fab  light-green accent-3" href="#modal2"><i class="material-icons">add</i></a>
            </div>
            <div class="card-content">
                <span class="card-title">Card Title</span>
              <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
            </div>
          </div>
        </div>
    </div>
    <!-- Modal Structure -->
    <div id="modal2" class="modal bottom-sheet">
        <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>   
</body>
</html>

＆＃13;

MATERIALCSS：FABs按钮触发没有任何反应

2 个答案: