给对话框，确认信息框，或者其他内容使用模态时可以调用。为了使模态工作，你需要给模态一个Id来关联触发器。增加一个关闭按钮，只要增加类 .modal-close到你的关闭按钮上。

模态框

  <!-- 模态框触发器 -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">模态</a>

  <!-- 模态框结构 -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>模态框头部</h4>
      <p>一堆文字</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">同意</a>
    </div>
  </div>
          

带按钮触发器的模态框

如果您喜欢使用按钮打开模态框，请在 data-target中指定模态框id，而不是href属性。

  <!-- 模态框触发器 -->
  <button data-target="modal1" class="btn modal-trigger">模态框</button>
          

初始化实例时使用的选项。

使用触发器打开模态框

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, options);
  });

  // 或用JQuery

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

选项

您可以使用这些选项自定义每个模态框的行为。例如，您可以调用一个自定义函数当模态消失时运行。要做到这一点，只需将函数放在初始化代码中，如下所示。

名称	类型	默认	描述
opacity	Number	0.5	模态框遮罩层的不透明度。
inDuration	Number	250	过渡持续时间（毫秒）。
outDuration	Number	250	过渡结束持续时间（以毫秒为单位）。
onOpenStart	Function	null	在打开模态框之前调用的回调函数。
onOpenEnd	Function	null	在模态框打开后调用的回调函数。
onCloseStart	Function	null	在关闭模态框之前调用的回调函数。
onCloseEnd	Function	null	关闭模态后调用的回调函数。
preventScrolling	Boolean	true	在模态框打开时阻止页面滚动。
dismissible	Boolean	true	允许通过键盘或点击遮罩层来移除模态框。
startingTop	String	'4%'	起始距离顶部的偏移量
endingTop	String	'10%'	尾部距离顶部的偏移量

方法

因为jQuery不再是一个依赖项，所以所有的方法都是在插件实例上调用的。你可以获得插件实例如下：

  var instance = M.Modal.getInstance(elem);

  /* JQuery方法调用
          您仍然可以使用旧的jQuery插件方法调用。
      但您将无法访问实例属性。

    $('.modal').modal('方法名称');
    $('.modal').modal('方法名称', 参数名称);
  */
        

.open();

打开模态框

instance.open();
      

.close();

关闭模态框

instance.close();
      

.destroy();

销毁插件实例并回收

instance.destroy();
      

属性

名称	类型	描述
el	Element	插件初始化时使用的DOM元素。
options	Object	初始化实例时使用的选项。
isOpen	Boolean	模态框是否打开
id	string	模态框的Id

固定底部的模态框

固定底部的模态框

如果你有内容并且很长，并且你想你的动作按钮一直可见，你可以增加 modal-fixed-footer类到模态框。

  <!-- 模态框触发器 -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">模态框</a>

  <!-- 模态框结构 -->
  <div id="modal1" class="modal modal-fixed-footer">
    <div class="modal-content">
      <h4>模态框头部</h4>
      <p>一堆文字</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">同意</a>
    </div>
  </div>
          

底部工作表模态框

底部工作表模态框样式

底部工作表模态框非常适合在屏幕底部向用户显示操作。他们的行为仍然相和常规模态框相同。

  <!-- 模态框触发器 -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">模态框</a>

  <!-- 模态框结构 -->
  <div id="modal1" class="modal bottom-sheet">
    <div class="modal-content">
      <h4>模态框头部</h4>
      <p>一堆文字</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">同意</a>
    </div>
  </div>