Question

预加载 Modal 用来提示一些后台活动（像Ajax请求）和阻止在这个活动期间的任何用户操作。 打开预加载 modal 我们也需要调用适当的App方法: $.show预加载([title])- 显示 预加载 modal

• title - string. Optional. 预加载 modal 标题. 默认（没有指定）的时候，它等同于 "Loading...". 你可以在App初始化时通过 modal预加载Title 参数改变默认的 预加载 标题。

该方法返回动态创建的modal的HTML元素。

$.hide预加载() - 隐藏/关闭 预加载 modal. 因为 预加载 modal 没有任何按钮, 它应该用 JavaScript 来关闭

<header class="bar bar-nav">
<h1 class="title">预加载 Modal (Preloader Modal)</h1>
</header>
...
<div class="content">
<div class="content-block">
  <p><a href="#" class="open-preloader">Open Preloader</a></p>
  <p><a href="#" class="open-preloader-title">Open Preloader with custom title</a></p>
</div>
</div>
...

$(document).on('click', '.open-preloader', function () {
$.showPreloader();
setTimeout(function () {
    $.hidePreloader();
}, 2000);
});
$(document).on('click','.open-preloader-title', function () {
$.showPreloader('Custom Title')
setTimeout(function () {
    $.hidePreloader();
}, 2000);
});

迷你指示器

如果你不需要用像预加载Modal这样如此大的modal 窗口去指示活动, 你可以使用简单并且小的指示器modal：

• $.showIndicator() - 显示指示器 modal
• $.hideIndicator() - 隐藏/关闭指示器 modal. 因为指示器modal没有任何按钮, 它需要用JavaScript来关闭

<header class="bar bar-nav">
  <h1 class="title">指示器(indicator)</h1>
</header>
...
<div class="content">
<div class="content-block">
  <p><a href="#" class="open-indicator">Open Indicator</a></p>
</div>
</div>
...

$(document).on('click','.open-indicator', function () {
  $.showIndicator();
  setTimeout(function () {
      $.hideIndicator();
  }, 2000);
});