Amaze UI

Alert


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

基础用法

大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。
Copy
<div class="am-alert">
  大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。
</div>

.am-alert

在线运行

关闭按钮

大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。

Copy
<div class="am-alert" data-am-alert>
  <button type="button" class="am-close">&times;</button>
  <p>大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。</p>
</div>

button元素中添加am-close使用

在线运行

主题用法

大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。

大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。

大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。

大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。

Copy
<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>
  <button type="button" class="am-close">&times;</button>
  <p>大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。</p>
</div>
<div class="am-alert am-alert-danger" data-am-alert>
  <button type="button" class="am-close">&times;</button>
  <p>大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。</p>
</div>
<div class="am-alert am-alert-secondary" data-am-alert>
  <button type="button" class="am-close">&times;</button>
  <p>大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。</p>
</div>
  • am-alert-success
  • am-alert-warning
  • am-alert-danger
  • am-alert-secondary

在线运行

组合icon

大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。

大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。

大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。

Copy
<div class="am-alert am-alert-success am-alert-icon-sm" data-am-alert>
  <button type="button" class="am-close">&times;</button>
  <span class="am-icon-check-circle"></span>
  <p>大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。</p>
</div>
<div class="am-alert am-alert-warning am-alert-icon-sm" data-am-alert>
  <button type="button" class="am-close">&times;</button>
  <span class="am-icon-exclamation-circle"></span>
  <p>大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。</p>
</div>
<div class="am-alert am-alert-danger am-alert-icon-sm" data-am-alert>
  <button type="button" class="am-close">&times;</button>
  <span class="am-icon-times-circle"></span>
  <p>大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。</p>
</div>

span元素中添加am-icon-xxx-circle使用

在线运行

多元素组合使用

念奴娇 赤壁怀古

大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。

Copy
<div class="am-alert am-alert-icon-lg" data-am-alert>
  <button type="button" class="am-close">&times;</button>
  <span class="am-icon-check-circle"></span>
  <div class="am-alert-bd">
    <h3>念奴娇 赤壁怀古</h3>
    <p>大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。</p>
  </div>
</div>

段落用法

念奴娇 赤壁怀古

宋代文学家苏轼的词作,是豪放词的代表作之一
  • 大江东去,浪淘尽,千古风流人物。
  • 故垒西边,人道是,三国周郎赤壁。
  • 乱石穿空,惊涛拍岸,卷起千堆雪。
  • 江山如画,一时多少豪杰。
Copy
<div class="am-alert" data-am-alert>
  <button type="button" class="am-close">&times;</button>
  <h3>念奴娇 赤壁怀古</h3>
  <h5>宋代文学家苏轼的词作,是豪放词的代表作之一</h5>
  <ul>
    <li>大江东去,浪淘尽,千古风流人物。</li>
    <li>故垒西边,人道是,三国周郎赤壁。</li>
    <li>乱石穿空,惊涛拍岸,卷起千堆雪。</li>
    <li>江山如画,一时多少豪杰。</li>
  </ul>
</div>

调用方式

通过 Data API

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

Copy
<div class="am-alert" id="my-alert" data-am-alert>
  <button type="button" class="am-close">&times;</button>
  <p>没什么可给你,但求凭这阙歌。谢谢你风雨里,都不退愿陪着我。</p>
</div>
<script>
$(function() {
  $(document).on('closed.alert.amui', function() {
    console.log('警告窗口已经关闭');
  });
});
</script>

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

在线运行

通过 JS

开启关闭按钮交互功能:

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

方法

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

自定义事件

事件名称描述
close.alert.amuiclose 方法被调用时立即触发
closed.alert.amui元素被关闭以后触发(CSS 动画执行完成)
$('#my-alert').on('closed.alert.amui', function() {
  alert('警告窗口已经关闭');
});

JS 控制示例

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

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

Copy
<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();
      console.log('已激活,点击上的 X 试试!');
    });
  });
</script>

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

这是一个警告框!

Copy
<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) {
      console.log('警告框开始关闭!');
    });

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