angular-popups

基于 AngularJS 的浮層組件，由 artDialog 演進而來。

1. 使用 AngularJS 自帶的ng-if、ng-show、ng-hide控制浮層的顯示與隱藏
2. 支持 ARIA 規范、無障礙焦點管理、快捷鍵關閉
3. 完全基于 HTML 標簽，高可定制化
4. 可以指定元素對齊或者頁面居中顯示
5. 可以使用模態特性

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

使用

支持使用 script 標簽或者 webpack 調用：

script

下載：angular-popups

調用

<script src="js/jquery.js"></script>
<script src="js/angular.js"></script>
<script src="js/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 依賴jquery和angular這兩個全局模塊

指令

內置三個浮層指令：

• dialog對話框指令
• bubble氣泡指令
• popup透明浮層指令

浮層通用參數

dialog

對話框指令

子指令

對話框子指令中的事件可以使用$close()這個函數，它會調用通用參數close中的表達式

示例

1. 普通對話框
2. 模態對話框
3. 帶按鈕的對話框
4. 帶狀態欄的對話框
5. 無標題的對話框
6. 無關閉按鈕的對話框
7. 帶箭頭的對話框
8. fixed 定位的對話框
9. 自動關閉的對話框
10. 可拖拽的對話框

bubble

氣泡浮層

示例

1. 普通氣泡
2. 自定義氣泡方向
3. 不被關閉的氣泡

popup

透明浮層。通常用來定義自定義的浮層

示例

1. 自定義浮層

兼容性

• Chrome
• Firefox
• IE9+

項目主頁：http://www.baiduhome.net/lib/view/home/1450624163727