Question

出于某种原因，我的物化模态有一个非常奇怪的布局。我没有触摸我的CSS文件或改变了基本风格。也许有人知道问题是什么。

我的模态不在某些div中。它只是在体内

＆＃13;

$(document).ready(function() {
  $('.modal').modal();
  $('#modal1').on('click', function() {});
});

＆＃13;

html,
body {
  max-height: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  background-image: url("../img/kristallwelt.jpg");
  -webkit-background-size: cover;
  moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

＆＃13;

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

＆＃13;

预期结果 Expected result

我的结果

修改

在我得到一个解决方案之后，我在参考文献中挣扎。一旦我点击按钮，我就明白了：

错误

在这种情况下，我有一些错误的引用。有人在这看到问题吗？

包含在标题

<!DOCTYPE html>
<html>
  <head>
    <!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- JQuery UI -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Font aswesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <!-- Materialize Logos -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Include CSS -->
  <link rel="stylesheet" type="text/css" href="../css/style.css">
  </head>
</html>

**包括在身体的尽头**

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css">

 <!-- Compiled and minified JavaScript -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>

此控制台错误也可能相关

错误

Answer 1

您在HTML中遗漏了很多东西，所以我更新了您的代码。

<强>样本 https://jsfiddle.net/98w7ro4u/

<强> HTML

<!-- Modal -->
<div id="modal1" class="modal fade  modal-fixed-footer" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">        
    <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>
         <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Disgree</a>
      </div>
    </div>

  </div>
</div>

<强> JQuery的

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

<强> CSS

 You can use yours

物化模态显示错误

1 个答案: