模态框



介绍

模态效果主要用在对话框,确认信息,或者其它需要强调的地方。你需要在按钮上指定Modal ID来触发它。 在另外一个按钮上添加一个.modal-close来使其作为一个关闭按钮。

Modal    Modal With Fixed Footer    Modal Bottom Sheet Style

Modals HTML 结构


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

按钮触发

如果你还是喜欢用Button那么添加一个data-target替代href属性


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

初始化


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

当然你也可以通过函数来触发modal,看下面的例子:


  $('#modal1').openModal();
          

同时你也可以通过函数来关闭它:


  $('#modal1').closeModal();
          

选项

通过一些选项你可以自定义模态框的行为。看代码:


  $('.modal-trigger').leanModal({
    dismissible: true, // 点击模态框外部则关闭模态框
    opacity: .5, // 背景透明度
    in_duration: 300, // 切入时间
    out_duration: 200, // 切出时间
    ready: function() { alert('Ready'); }, // 当模态框打开时执行的函数
    complete: function() { alert('Closed'); } // 当模态框关闭时执行的函数
    }
  );