•  

Amaze UI Dialog 弹出框

2017-10-21

Amaze UI Modal 插件 HTML 模板封装。

使用说明:

  1. 获取 Amaze UI dialog

  2. 在 Amaze UI 样式之后引入 dialog 样式(dist 目录下的 CSS):

    Amaze UI dialog 依赖 Amaze UI 样式。

     Copy
    <link rel="stylesheet" href="path/to/amazeui.min.css"/>
  3. 引入 dialog 插件(dist 目录下的 JS):

<script src="path/to/jquery.min.js"></script>
<script src="path/to/amazeui.min.js"></script> 
<script src="path/to/amazeui.dialog.min.js"></script>


  1. 调用 dialog:

    AMUI.dialog.alert({
      title: '错误提示',
      content: '你的家还好吧',
      onConfirm: function() { console.log('close');
        }
    });
    
    AMUI.dialog.confirm({
      title: '错误提示',
      content: '正文内容',
      onConfirm: function() { console.log('onConfirm');
      },
      onCancel: function() { console.log('onCancel')
      }
    }); var $loading = AMUI.dialog.loading();
    setTimeout(function() {
      $loading.modal('close');
    }, 3000); var $actions = AMUI.dialog.actions({
      title: '标题啊',
      items: [
        {content: '<a href="#"><span class="am-icon-wechat"></span> 分享到微信</a>'},
        {content: '<a href="#"><i class="am-icon-mobile"></i> 短信分享</a>'},
        {content: '<a href="#"><i class="am-icon-twitter"></i> 分享到 XX 萎跛</a>'}
      ],
      onSelected: function(index, target) { console.log(index);
        $actions.close();
      }
    });
    
    $actions.show();
    
    AMUI.dialog.popup({title: '标题', content: '正文'});
软件首页 进入下载界面
申明:本文受法律保护,未经作者同意不得用于商业用途,如转载请说明出处!
评论