模态窗口

优质

小牛编辑

118浏览

2023-12-01

给对话框，确认信息框，或者其他内容使用模态时可以调用。为了使模态工作，你需要给模态一个 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
});