Alert

显示可关闭的页内警告信息。

使用演示

基本形式

没什么可给你，但求凭这阙歌。谢谢你风雨里，都不退愿陪着我。

<div class="am-alert">
  没什么可给你，但求凭这阙歌。谢谢你风雨里，都不退愿陪着我。
</div>

关闭按钮

没什么可给你，但求凭这阙歌。谢谢你风雨里，都不退愿陪着我。

<div class="am-alert" data-am-alert>
  <button type="button" class="am-close">&times;</button>
  <p>没什么可给你，但求凭这阙歌。谢谢你风雨里，都不退愿陪着我。</p>
</div>

不同状态

没什么可给你，但求凭这阙歌。谢谢你风雨里，都不退愿陪着我。

<div class="am-alert am-alert-success" data-am-alert>
  <button type="button" class="am-close">&times;</button>
  <p>没什么可给你，但求凭这阙歌。谢谢你风雨里，都不退愿陪着我。</p>
</div>

<div class="am-alert am-alert-warning" data-am-alert>
  ...
</div>

<div class="am-alert am-alert-danger" data-am-alert>
  ...
</div>

<div class="am-alert am-alert-secondary" data-am-alert>
  ...
</div>

多内容

共同渡过

《共同渡过》是张国荣1987年发行的专辑《Summer Romance》中的一首歌。

若我可再活多一次都盼
再可以在路途重逢着你
共去写一生的句子
若我可再活多一次千次
我都盼面前仍是你
我要他生都有今生的暖意

<div class="am-alert" data-am-alert>
  <button type="button" class="am-close">&times;</button>
  <h3>共同渡过</h3>
  <p>《共同渡过》是张国荣1987年发行的专辑《Summer Romance》中的一首歌。</p>
  <ul>
    <li>若我可再活多一次都盼</li>
    <li>再可以在路途重逢着你</li>
    <li>共去写一生的句子</li>
    <li>若我可再活多一次千次</li>
    <li>我都盼面前仍是你</li>
    <li>我要他生都有今生的暖意</li>
  </ul>
</div>

调用方式

通过 Data API

在 Alert 最外层元素上添加 data-am-alert。

没什么可给你，但求凭这阙歌。谢谢你风雨里，都不退愿陪着我。

<div class="am-alert" data-am-alert>
  <button type="button" class="am-close">&times;</button>
  ...
</div>

通过 JS

开启关闭按钮交互功能：

$('.am-alert').alert()

方法

$().alert() - 激活 Alert 元素关闭按钮的交互功能。
$().alert('close')：直接关闭元素。

自定义事件

事件名称	描述
`close.alert.amui`	`close` 方法被调用时立即触发
`closed.alert.amui`	元素被关闭以后触发（CSS 动画执行完成）

$('#my-alert').on('closed.alert.amui', function() {
  alert('警告窗口已经关闭');
});

JS 控制示例

示例1：激活 Alert 元素关闭按钮的交互功能

在应用 JS 激活之前这个警告框是无法关闭的。不信点右边的 x 试试。

<div class="am-alert" id="your-alert">
  <button type="button" class="am-close">&times;</button>
  <p>在应用 JS 激活之前这个警告框是无法关闭的。不信点右边的 x 试试。</p>
</div>
<button type="button" class="am-btn am-btn-danger" id="doc-alert-btn-bind">点击激活上面 Alert 的关闭功能</button>
<script>
  $(function() {
    $('#doc-alert-btn-bind').one('click', function() {
      $('#your-alert').alert();
      alert('已激活，点击上的 X 试试！');
    });
  });
</script>

示例2：使用 JS 关闭警告框及监听自定义事件

这是一个警告框！

<div class="am-alert" id="your-alert-1">
  <button type="button" class="am-close">&times;</button>
  <p>这是一个警告框！</p>
</div>

<button type="button" class="am-btn am-btn-warning" id="doc-alert-btn-close">点击关闭上面的 Alert</button>
<script>
  $(function() {
    $('#doc-alert-btn-close').one('click', function() {
      $('#your-alert-1').alert('close');
    });

    $(document).on('close.alert.amui', '#your-alert-1', function(e) {
      alert('警告框开始关闭！');
    });

    $(document).on('closed.alert.amui', '#your-alert-1', function(e) {
      alert('警告框关闭完成！');
    });
  });
</script>

Amaze UI

JS 插件

目录

Alert

使用演示

基本形式

关闭按钮

不同状态

多内容

共同渡过

调用方式

通过 Data API

通过 JS

方法

自定义事件

JS 控制示例