物化设计中的全屏模态

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我不想和链接（动画）一样。但我想全屏实现打开的模态封面。

Answer 1

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

<强> CSS

.modal {
   max-height: 100%;
}

<强> PICTURE

<强>样本

jsFiddle