介绍

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

模态    固定底部的模态    底部样式的模态

模态的HTML结构

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

  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>模态标题</h4>
      <p>一堆文本</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">同意</a>
    </div>
  </div>
          

固定底部的模态

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

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

  <!-- Modal Structure -->
  <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-action modal-close waves-effect waves-green btn-flat ">同意</a>
    </div>
  </div>
          

底部样式的模态

底部样式的模态用于展示动作给用户在屏幕的底部是很擅长的。他们仍然扮演常规模态。

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

  <!-- Modal Structure -->
  <div id="modal1" class="modal bottom-sheet">
    <div class="modal-content">
      <h4>模态标题</h4>
      <p>一堆文本</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">同意</a>
    </div>
  </div>
          

按钮触发的模态

如果你更喜欢使用按钮来开启模态，你可以将模态的ID放在 data-target里面。

  <!-- Modal Trigger -->
  <button data-target="modal1" class="btn">模态</button>
          

jQuery 插件初始化

使用触发器开启模态:

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

你也可以通过程序打开模态，下面的代码将使你模态打开。

  $('#modal1').modal('open');
          

你也可以通过程序关闭模态:

  $('#modal1').modal('close');
        

选项

您可以使用这些选项自定义每个模态的行为。例如，当一个模态被销毁时触发一个自定义函数来运行。要做到这一点，就将你的函数在初始化代码中指定，如下所示。

  $('.modal').modal({
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      opacity: .5, // Opacity of modal background
      in_duration: 300, // Transition in duration
      out_duration: 200, // Transition out duration
      starting_top: '4%', // Starting top style attribute
      ending_top: '10%', // Ending top style attribute
      ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
        alert("Ready");
        console.log(modal, trigger);
      },
      complete: function() { alert('Closed'); } // Callback for Modal close
    }
  );