Awesome

angular-popups

基于 AngularJS 的浮层组件，由 artDialog 演进而来。angular-popups 是一个严格遵循 AngularJS 架构与 web 标准的组件：

1. 使用 AngularJS 自带的 ng-if、ng-show、ng-hide 控制浮层的显示、销毁
2. 支持 ARIA 规范、无障碍焦点管理、快捷键关闭
3. 完全基于 HTML 标签（指令），无需在控制器中进行配置
4. 可以指定元素或鼠标事件对象（$event）对齐
5. 支持模态浮层
6. 对移动端支持友好
7. 轻量（css+js=7kb），不依赖 jQuery 等外部库

演示站点：https://aui.github.io/angular-popups/

使用

支持使用 script 标签或者 webpack、requirejs、seajs 调用：

script

调用

<script src="lib/angular.js"></script>
<script src="dist/angular-popups.js"></script>
<script>
    var app = angular.module('app', ['angular-popups']);
</script>

webpack

安装

npm install angular-popups

调用

require('angular-popups');
var app = angular.module('app', ['angular-popups']);

angular-popups 依赖 angular 这个全局模块

指令

包含如下浮层指令：

• dialog 对话框指令
• bubble 气泡指令
• notice 通知消息指令
• popup 透明浮层指令

浮层通用参数

ng-if、ng-show 如果传入的是 $event，则浮层会定位到事件触发位置

dialog

对话框指令

子指令

对话框子指令中的事件可以使用 $close() 这个函数，它会调用通用参数 close 中的表达式

示例

<dialog ng-if="dialog.open" close="dialog.open=false">
    <div dialog-title>消息</div>
    <div dialog-content>hello world</div>
</dialog>

在线演示：

1. 普通对话框
2. 模态对话框
3. 带按钮的对话框
4. 带状态栏的对话框
5. 无标题的对话框
6. 无关闭按钮的对话框
7. 带箭头的对话框
8. fixed 定位的对话框
9. 定时关闭的对话框
10. 外部点击可关闭的对话框

bubble

气泡浮层指令

示例

<button id="btn" ng-click="bubble.open = true">打开气泡</button>
<bubble ng-if="bubble.open" for="btn" close="bubble.open=false">
    hello world
</bubble>

在线演示：

1. 普通气泡
2. 自定义气泡方向
3. 不被关闭的气泡

notice

通知消息指令

示例

<notice ng-if="notice.open" duration="2000" close="notice.open=false">
    hello world
</notice>

在线演示：

1. 普通通知浮层
2. 模态通知浮层

popup

透明浮层指令

无任何样式，可以用来制作自定义形状的浮层

示例

<popup ng-if="popup.open" close="popup.open=false">
    <div class="mod-popup-example">hello world</div>
</popup>

在线演示：

1. 自定义浮层
2. 创建右键菜单

服务

若想在 js 代码中调用浮层相关控件，可以使用 Popup 服务。

方法

• Popup.alert(content, ok)
• Popup.confirm(content, ok, cancel)
• Popup.notice(content, duration, ok);

Popup 服务仅支持文本消息，HTML 内容请使用指令

配置

配置默认的标题以及按钮文案

app.config(function (PopupProvider) {
    PopupProvider.title = '提示';
    PopupProvider.okValue = '确定';
    PopupProvider.cancelValue = '取消';
});

示例

app.controller('testCtrl', function($scope, Popup) {
    Popup.alert('hello world', function () {
        console.log('ok');
    });
});

在线演示：

1. 在控制器中使用 Popup 服务

兼容性

• Chrome
• Firefox
• IE9+

更新日志

CHANGELOG.md

许可

MIT

喜欢这个项目？捐助一杯咖啡支持下（￥28）