菜单

使用模态框作为对话框、确认消息或其他可调用的内容。为了让模态框正常工作，你必须将模态框 ID 添加到触发器的链接中。要添加一个关闭按钮，只需将类 .modal-close 添加到按钮中。

模态框 

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

  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>

带按钮触发器的模态框

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


  <!-- Modal Trigger -->
  <button data-target="modal1" class="btn modal-trigger">Modal</button>

初始化

使用触发器打开模态框


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

  // Or with jQuery

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

选项

您可以使用这些选项自定义每个模态框的行为。例如，您可以调用自定义函数，以便在模态框关闭时运行。为此，只需将您的函数放在初始化代码中，如下所示。

名称 类型 默认值 描述
opacity 数字 0.5 模态框覆盖层的透明度。
inDuration 数字 250 过渡持续时间（以毫秒为单位）。
outDuration 数字 250 过渡持续时间（以毫秒为单位）。
onOpenStart 函数 null 在模态框打开之前调用的回调函数。
onOpenEnd 函数 null 在模态框打开之后调用的回调函数。
onCloseStart 函数 null 在模态框关闭之前调用的回调函数。
onCloseEnd 函数 null 在模态框关闭之后调用的回调函数。
preventScrolling 布尔值 true 在模态框打开时阻止页面滚动。
dismissible 布尔值 true 允许通过键盘或覆盖层单击关闭模态框。
startingTop 字符串 '4%' 开始顶部偏移量
endingTop 字符串 '10%' 结束顶部偏移量

方法

由于 jQuery 不再是依赖项，因此所有方法都在插件实例上调用。您可以像这样获取插件实例


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

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.modal').modal('methodName');
    $('.modal').modal('methodName', paramName);
  */
.open();

打开模态框


instance.open();

.close();

关闭模态框


instance.close();

.destroy();

销毁插件实例并拆除


instance.destroy();

属性

名称 类型 描述
el 元素 用于初始化插件的 DOM 元素。
options 对象 用于初始化实例的选项。
isOpen 布尔值 如果模态框已打开。
id 字符串 模态框元素的 ID

底部工作表模态框

底部工作表样式的模态框

底部工作表模态框非常适合在屏幕底部向用户显示操作。它们的作用与常规模态框相同。


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

  <!-- Modal Structure -->
  <div id="modal1" 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-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>