javascript - 物化设计中的全屏模式

Question

我正在使用 Materialise 设计。我正在实现全屏模式。宽度在全屏中花费但高度未在全屏中设置。我看到一个链接然后我想这样实现。如果有任何插件和任何其他解决方案，请告诉我。 http://joaopereirawd.github.io/animatedModal.js/

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

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


<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal" style="width:100%;height:100%">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
   
  </div>

我不想与链接(动画)相同。但我想实现打开的模态覆盖全屏。

Answer 1

在 materialize.css 文件中，我查看了 .modal 选择器，它有一个名为 max-height: 70%; 的属性，这就是为什么你的内联样式 height: 100 % 没有工作。您可以覆盖默认的 max-height。

CSS

.modal {
   max-height: 100%;
}

图片

演示

jsFiddle