angular-popups

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	显示或隐藏浮层（DOM 插入或删除）
ng-show	显示浮层
ng-hide	隐藏浮层
for	指定元素对齐，传入目标元素 ID 即可
align	对齐的参数，此参数需要与 for 配合使用。默认 "bottom left"，可选值："top left" "top" "top right" "right top" "right" "right bottom" "bottom right" "bottom" "bottom left" "left bottom" "left" "left top"
fixed	使用固定定位，等同于 CSS position:fixed
modal	模态浮层
duration	自动关闭的时间（单位毫秒）
close	浮层关闭事件
close-action	配置浮层由什么动作来触发关闭（执行 close 事件）。默认 "esc timeout" ，所有支持的动作： "esc timeout outerchick click"

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

dialog

对话框指令

子指令

名称	说明
dialog-title	对话框标题容器
dialog-content	对话框内容容器
dialog-buttons	对话框按钮容器
dialog-statusbar	对话框状态栏容器

对话框子指令中的事件可以使用 $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）