example

' + code + '<\/code><\/pre>'); 28 | })(document.getElementById('show-source-code')); 29 | 30 | -------------------------------------------------------------------------------- /example/dialog-ng-if.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /example/dialog-modal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /example/dialog-ng-hide.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /example/dialog-ng-show.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/css/ui-popup.css: -------------------------------------------------------------------------------- 1 | 2 | .ui-popup { 3 | position: absolute; 4 | font-family: Helvetica, arial, sans-serif; 5 | } 6 | .ui-popup:focus { 7 | outline: 0; 8 | } 9 | .ui-popup-show { 10 | display: block; 11 | 12 | } 13 | .ui-popup-modal::before { 14 | content: ''; 15 | position: fixed; 16 | left: 0; 17 | right: 0; 18 | top: 0; 19 | bottom: 0; 20 | background: #000; 21 | opacity: .7; 22 | -webkit-transform: scale(3); 23 | transform: scale(3); 24 | -webkit-animation: ui-popup-opacity .15s 1 linear; 25 | animation: ui-popup-opacity .15s 1 linear; 26 | 27 | } 28 | .ui-popup-modal > * { 29 | position: relative; 30 | } 31 | 32 | @-webkit-keyframes ui-popup-opacity { 33 | 0% {opacity: 0;} 34 | 100% {opacity: .7;} 35 | } 36 | @keyframes ui-popup-opacity { 37 | 0% {opacity: 0;} 38 | 100% {opacity: .7;} 39 | } -------------------------------------------------------------------------------- /example/dialog-duration.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /example/dialog-close-action.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /example/bubble-close.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | hello world 20 | 21 | 22 | hello world 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-popups", 3 | "version": "0.0.2", 4 | "readmeFilename": "README.md", 5 | "description": "基于 AngularJS 的浮层组件", 6 | "homepage": "https://github.com/aui/angular-popups", 7 | "keywords": [ 8 | "angular", 9 | "dialog", 10 | "popup", 11 | "bubble", 12 | "notice", 13 | "artDialog" 14 | ], 15 | "author": "aui", 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/aui/angular-popups.git" 19 | }, 20 | "main": "dist/angular-popups.js", 21 | "scripts": { 22 | "min": "webpack -p", 23 | "test": "open test/index.html" 24 | }, 25 | "devDependencies": { 26 | "angular": "^1.4.8", 27 | "css-loader": "^0.23.0", 28 | "extract-text-webpack-plugin": "^0.9.1", 29 | "jshint": "^2.8.0", 30 | "jshint-loader": "^0.8.3", 31 | "style-loader": "^0.13.0", 32 | "webpack": "^1.12.15" 33 | }, 34 | "license": "MIT" 35 | } 36 | -------------------------------------------------------------------------------- /example/dialog-fixed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 24 | 25 | 26 | 27 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /example/dialog-dialog-statusbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /example/dialog-dialog-title.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /example/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 糖饼 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /example/dialog-close.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /example/dialog-dialog-buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 25 | 26 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 3 | var packageJson = require('./package.json'); 4 | var version = packageJson.version; 5 | 6 | module.exports = { 7 | entry: { 8 | 'angular-popups': './src/popups.js', 9 | 'angular-popups-nocss': './src/popups-nocss.js' 10 | }, 11 | output: { 12 | path: 'dist', 13 | filename: '[name].js' 14 | }, 15 | devtool: 'source-map', 16 | plugins: [ 17 | new ExtractTextPlugin('[name].css'), 18 | new webpack.BannerPlugin(packageJson.name + '@' + packageJson.version + ' | ' + packageJson.homepage) 19 | ], 20 | externals: { 21 | angular: 'angular' 22 | }, 23 | module: { 24 | preLoaders: [{ 25 | test: /\.js$/, 26 | exclude: /node_modules/, 27 | loader: 'jshint-loader' 28 | }], 29 | loaders: [ 30 | //{test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader')}, // 把 CSS 抽离成独立的文件 31 | { 32 | test: /\.css$/, 33 | loader: 'style!css?sourceMap&minimize' 34 | } 35 | ] 36 | }, 37 | 38 | jshint: { 39 | camelcase: true, 40 | emitErrors: false, 41 | failOnHint: false, 42 | reporter: function(errors) {} 43 | } 44 | }; -------------------------------------------------------------------------------- /example/services.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 |

19 | 20 | 21 | 22 |

23 | 24 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /example/popup-contextmenu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 50 | 51 | 52 | 53 |

54 | 点击右键 55 |

56 | 57 | 58 |

我是右键菜单选项
Menu2

62 | 63 | 64 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | test 8 | 9 | 10 | 11 | 12 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 32 | 33 | 34 | 42 | 43 | 44 | 53 | 54 | 55 | 59 | 60 | 61 | 64 | 65 | 66 | 70 | 71 | 72 | 76 | 77 | 78 | 79 | 80 | {{message}} 81 | 82 | 83 | 84 | 85 | hello 86 | 87 | 88 | -------------------------------------------------------------------------------- /src/directives/dialog.js: -------------------------------------------------------------------------------- 1 | /* global require */ 2 | 3 | 'use strict'; 4 | 5 | var angular = require('angular'); 6 | var $ = angular.element; 7 | var directives = require('./directives'); 8 | 9 | 10 | var dialogTpl = 11 | '

' + 12 | '' + 13 | '

' + 14 | '' + 15 | '

'; 16 | 17 | var titleTpl = '

'; 18 | var closeTpl = ''; 19 | var contentTpl = '

'; 20 | var statusbarTpl = ''; 21 | var buttonsTpl = ''; 22 | 23 | directives.createPopup('dialog', { 24 | template: '', 25 | link: function(scope, elem, attrs, controller) { 26 | 27 | var node = elem[0]; 28 | var dialog = createElement(dialogTpl); 29 | 30 | scope.$dialogId = 'ui-dialog' + scope.$id; 31 | 32 | function createElement(html) { 33 | var temp = document.createElement('div'); 34 | temp.innerHTML = html; 35 | return temp.firstChild; 36 | } 37 | 38 | var childDirective = function(name) { 39 | var directiveName = 'dialog'; 40 | var e = directiveName + '-' + name; 41 | var e2 = directiveName + '\\:' + name; 42 | var a = '[' + e + ']'; 43 | var a2 = '[' + e2 + ']'; 44 | var c = '.ui-dialog' + '-' + name; 45 | 46 | return node.querySelector([e, e2, a, a2, c].join(',')); 47 | }; 48 | 49 | var childElem = function(name) { 50 | return dialog.querySelector('.ui-dialog-' + name); 51 | }; 52 | 53 | var closeNode = attrs.close ? createElement(closeTpl) : null; 54 | var titleNode = childDirective('title'); 55 | var contentNode = childDirective('content'); 56 | var statusbarNode = childDirective('statusbar'); 57 | var buttonsNode = childDirective('buttons'); 58 | 59 | 60 | var headerNode = childElem('header'); 61 | var bodyNode = childElem('body'); 62 | var footerNode = childElem('footer'); 63 | 64 | appendChild(headerNode, closeNode); 65 | appendChild(headerNode, titleNode); 66 | appendChild(bodyNode, contentNode); 67 | appendChild(footerNode, statusbarNode); 68 | appendChild(footerNode, buttonsNode); 69 | 70 | 71 | if (!titleNode) { 72 | $(headerNode).remove(); 73 | } 74 | 75 | if (!statusbarNode && !buttonsNode) { 76 | $(footerNode).remove(); 77 | } 78 | 79 | 80 | if (closeNode) { 81 | closeNode.addEventListener('click', controller.close, false); 82 | } 83 | 84 | 85 | appendChild(node, dialog); 86 | 87 | 88 | function appendChild(parent, child) { 89 | if (child) { 90 | parent.appendChild(child); 91 | } 92 | } 93 | 94 | } 95 | }); 96 | 97 | 98 | childDirective('dialogTitle', { 99 | template: titleTpl 100 | }); 101 | 102 | childDirective('dialogContent', { 103 | template: contentTpl 104 | }); 105 | 106 | childDirective('dialogStatusbar', { 107 | template: statusbarTpl 108 | }); 109 | 110 | childDirective('dialogButtons', { 111 | template: buttonsTpl 112 | }); 113 | 114 | 115 | function childDirective(subName, subOptions) { 116 | directives.directive(subName, function() { 117 | return angular.extend({ 118 | require: '^dialog', 119 | restrict: 'AE', 120 | transclude: true, 121 | link: function (scope, elem, attrs, controller) { 122 | scope.$dialogId = 'ui-dialog' + scope.$parent.$id; 123 | scope.$close = controller.close; 124 | }, 125 | replace: true 126 | }, subOptions); 127 | }); 128 | } -------------------------------------------------------------------------------- /src/services/popup.js: -------------------------------------------------------------------------------- 1 | /* global require */ 2 | // TODO Popup.prompt 3 | 4 | 'use strict'; 5 | 6 | var angular = require('angular'); 7 | var ngModule = require('../ng-module'); 8 | 9 | ngModule.provider('Popup', function() { 10 | 11 | var that = this; 12 | var compiled = false; 13 | var noop = function() {}; 14 | var defaults = { 15 | title: 'Message', 16 | okValue: 'Ok', 17 | cancelValue: 'Cancel' 18 | }; 19 | 20 | var model = { 21 | open: true, 22 | title: null, 23 | content: null, 24 | duration: null, 25 | okValue: null, 26 | cancelValue: null, 27 | ok: null, 28 | cancel: null, 29 | notice: false, 30 | $destroy: noop, 31 | $ok: function() { 32 | if (this.ok && this.ok() !== false) { 33 | this.open = false; 34 | this.$destroy(); 35 | } 36 | }, 37 | $cancel: function() { 38 | if (this.cancel && this.cancel() !== false) { 39 | this.open = false; 40 | this.$destroy(); 41 | } 42 | }, 43 | $close: function() { 44 | if (this.cancel) { 45 | this.$cancel(); 46 | } else { 47 | this.$ok(); 48 | } 49 | } 50 | }; 51 | 52 | var sub = { 53 | close: function() { 54 | model.$close(); 55 | } 56 | }; 57 | 58 | var baseDialogTpl = 59 | ''; 66 | 67 | var noticeDialogTpl = 68 | '' + 69 | '{{$$Popup.content}}' + 70 | ''; 71 | 72 | 73 | 74 | angular.extend(this, defaults); 75 | 76 | 77 | this.$get = ['$compile', '$rootScope', function ($compile, $rootScope) { 78 | 79 | function createPopup(options) { 80 | 81 | if (!compiled) { 82 | var baseDialog = createElement(baseDialogTpl); 83 | document.body.appendChild(baseDialog); 84 | $compile(baseDialog)($rootScope); 85 | 86 | var noticeDialog = createElement(noticeDialogTpl); 87 | document.body.appendChild(noticeDialog); 88 | $compile(noticeDialog)($rootScope); 89 | 90 | compiled = true; 91 | } 92 | 93 | var dialogModel = Object.create(model); 94 | 95 | dialogModel = angular.extend(dialogModel, that, options); 96 | dialogModel.$destroy = function () { 97 | delete $rootScope.$$Popup; 98 | }; 99 | 100 | $rootScope.$$Popup = dialogModel; 101 | 102 | return sub; 103 | } 104 | 105 | return { 106 | alert: function(content, ok) { 107 | return createPopup({ 108 | content: content, 109 | ok: ok || noop 110 | }); 111 | }, 112 | confirm: function(content, ok, cancel) { 113 | return createPopup({ 114 | content: content, 115 | ok: ok || noop, 116 | cancel: cancel || noop 117 | }); 118 | }, 119 | notice: function(content, duration, ok) { 120 | return createPopup({ 121 | content: content, 122 | duration: duration || 2000, 123 | ok: ok || noop, 124 | notice: true 125 | }); 126 | } 127 | }; 128 | }]; 129 | }); 130 | 131 | 132 | 133 | function createElement(html) { 134 | var temp = document.createElement('div'); 135 | temp.innerHTML = html; 136 | return temp.firstChild; 137 | } -------------------------------------------------------------------------------- /src/css/ui-bubble.css: -------------------------------------------------------------------------------- 1 | @import url('./ui-popup.css'); 2 | html, body { 3 | -webkit-tap-highlight-color:rgba(255,255,255,0); 4 | } 5 | .ui-bubble { 6 | position: relative; 7 | background: rgba(253, 248, 222, .9); 8 | border: 1px solid rgba(206, 157, 72, .7); 9 | border-radius: 3px; 10 | outline: 0; 11 | background-clip: padding-box; 12 | line-height: 1.428571429; 13 | color: #CD9C4F; 14 | /*-webkit-backdrop-filter: saturate(180%) blur(20px);*/ 15 | } 16 | .ui-popup-focus .ui-bubble { 17 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 18 | } 19 | .ui-bubble-content { 20 | padding: 5px; 21 | } 22 | 23 | .ui-popup-top-left .ui-bubble, 24 | .ui-popup-top .ui-bubble, 25 | .ui-popup-top-right .ui-bubble { 26 | top: -5px; 27 | } 28 | .ui-popup-bottom-left .ui-bubble, 29 | .ui-popup-bottom .ui-bubble, 30 | .ui-popup-bottom-right .ui-bubble { 31 | top: 5px; 32 | } 33 | .ui-popup-left-top .ui-bubble, 34 | .ui-popup-left .ui-bubble, 35 | .ui-popup-left-bottom .ui-bubble { 36 | left: -5px; 37 | } 38 | .ui-popup-right-top .ui-bubble, 39 | .ui-popup-right .ui-bubble, 40 | .ui-popup-right-bottom .ui-bubble { 41 | left: 5px; 42 | } 43 | .ui-bubble::before, 44 | .ui-bubble::after { 45 | content: ''; 46 | position: absolute; 47 | display: none; 48 | width: 0; 49 | height: 0; 50 | overflow:hidden; 51 | border:5px dashed transparent; 52 | } 53 | .ui-popup-anchor .ui-bubble::before, 54 | .ui-popup-anchor .ui-bubble::after{ 55 | display: block; 56 | } 57 | .ui-popup-top-left .ui-bubble::before, 58 | .ui-popup-top .ui-bubble::before, 59 | .ui-popup-top-right .ui-bubble::before { 60 | bottom: -10px; 61 | border-top:5px solid #CD9C4F; 62 | } 63 | .ui-popup-top-left .ui-bubble::after, 64 | .ui-popup-top .ui-bubble::after, 65 | .ui-popup-top-right .ui-bubble::after { 66 | bottom: -9px; 67 | border-top:5px solid #FDF8DF; 68 | } 69 | .ui-popup-top-left .ui-bubble::before, 70 | .ui-popup-top-left .ui-bubble::after { 71 | left: 9px; 72 | } 73 | .ui-popup-top .ui-bubble::before, 74 | .ui-popup-top .ui-bubble::after { 75 | left: 50%; 76 | margin-left: -5px; 77 | } 78 | .ui-popup-top-right .ui-bubble::before, 79 | .ui-popup-top-right .ui-bubble::after { 80 | right: 9px; 81 | } 82 | .ui-popup-bottom-left .ui-bubble::before, 83 | .ui-popup-bottom .ui-bubble::before, 84 | .ui-popup-bottom-right .ui-bubble::before { 85 | top: -10px; 86 | border-bottom:5px solid #CD9C4F; 87 | } 88 | .ui-popup-bottom-left .ui-bubble::after, 89 | .ui-popup-bottom .ui-bubble::after, 90 | .ui-popup-bottom-right .ui-bubble::after { 91 | top: -9px; 92 | border-bottom:5px solid #FDF8DF; 93 | } 94 | .ui-popup-bottom-left .ui-bubble::before, 95 | .ui-popup-bottom-left .ui-bubble::after { 96 | left: 9px; 97 | } 98 | .ui-popup-bottom .ui-bubble::before, 99 | .ui-popup-bottom .ui-bubble::after { 100 | margin-left: -5px; 101 | left: 50%; 102 | } 103 | .ui-popup-bottom-right .ui-bubble::before, 104 | .ui-popup-bottom-right .ui-bubble::after { 105 | right: 9px; 106 | } 107 | .ui-popup-left-top .ui-bubble::before, 108 | .ui-popup-left .ui-bubble::before, 109 | .ui-popup-left-bottom .ui-bubble::before { 110 | right: -10px; 111 | border-left:5px solid #CD9C4F; 112 | } 113 | .ui-popup-left-top .ui-bubble::after, 114 | .ui-popup-left .ui-bubble::after, 115 | .ui-popup-left-bottom .ui-bubble::after { 116 | right: -9px; 117 | border-left:5px solid #FDF8DF; 118 | } 119 | .ui-popup-left-top .ui-bubble::before, 120 | .ui-popup-left-top .ui-bubble::after { 121 | top: 9px; 122 | } 123 | .ui-popup-left .ui-bubble::before, 124 | .ui-popup-left .ui-bubble::after { 125 | margin-top: -5px; 126 | top: 50%; 127 | } 128 | .ui-popup-left-bottom .ui-bubble::before, 129 | .ui-popup-left-bottom .ui-bubble::after { 130 | bottom: 9px; 131 | } 132 | .ui-popup-right-top .ui-bubble::before, 133 | .ui-popup-right .ui-bubble::before, 134 | .ui-popup-right-bottom .ui-bubble::before { 135 | left: -10px; 136 | border-right:5px solid #CD9C4F; 137 | } 138 | .ui-popup-right-top .ui-bubble::after, 139 | .ui-popup-right .ui-bubble::after, 140 | .ui-popup-right-bottom .ui-bubble::after { 141 | left: -9px; 142 | border-right:5px solid #FDF8DF; 143 | } 144 | .ui-popup-right-top .ui-bubble::before, 145 | .ui-popup-right-top .ui-bubble::after { 146 | top: 9px; 147 | } 148 | .ui-popup-right .ui-bubble::before, 149 | .ui-popup-right .ui-bubble::after { 150 | margin-top: -5px; 151 | top: 50%; 152 | } 153 | .ui-popup-right-bottom .ui-bubble::before, 154 | .ui-popup-right-bottom .ui-bubble::after { 155 | bottom: 9px; 156 | } -------------------------------------------------------------------------------- /example/bubble-for-align.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 89 | 90 | 91 | 105 | 106 | hello world 107 | hello world 108 | hello world 109 | hello world 110 | hello world 111 | hello world 112 | hello world 113 | hello world 114 | hello world 115 | hello world 116 | hello world 117 | hello world 118 | 119 | 120 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 23 | 24 | 25 | 26 |

27 | 28 | 32 | 33 | 34 | 38 | 39 | 40 | 44 | 45 | 46 | 49 | 50 | 51 | 55 | 56 | 57 | 62 | 63 | 64 | 68 | 69 | 70 | 76 | 77 | 78 | 82 |

83 | 84 |

85 | 86 | hello world 87 | 88 | 89 | hello world 90 |

91 | 92 |

93 | 94 | 95 | hello world 96 | 97 | 98 | 99 | 100 | hello world 101 | 102 |

103 | 104 |

105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 |

127 | 128 | 129 | -------------------------------------------------------------------------------- /example/dialog-for-align.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 91 | 92 | 93 | 107 | 108 | 112 | 113 | 117 | 118 | 122 | 123 | 127 | 128 | 132 | 133 | 137 | 138 | 142 | 143 | 147 | 148 | 152 | 153 | 157 | 158 | 162 | 163 | 167 | 168 | 169 | -------------------------------------------------------------------------------- /example/dialog-for-align-ng-show.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 91 | 92 | 93 | 107 | 108 | 112 | 113 | 117 | 118 | 122 | 123 | 127 | 128 | 132 | 133 | 137 | 138 | 142 | 143 | 147 | 148 | 152 | 153 | 157 | 158 | 162 | 163 | 167 | 168 | 169 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular-popups 2 | 3 | 基于 AngularJS 的浮层组件，由 [artDialog](https://github.com/aui/artDialog) 演进而来。angular-popups 是一个严格遵循 AngularJS 架构与 web 标准的组件： 4 | 5 | 1. 使用 AngularJS 自带的 `ng-if`、`ng-show`、`ng-hide` 控制浮层的显示、销毁 6 | 2. 支持 ARIA 规范、无障碍焦点管理、快捷键关闭 7 | 3. 完全基于 HTML 标签（指令），无需在控制器中进行配置 8 | 4. 可以指定元素或鼠标事件对象（`$event`）对齐 9 | 5. 支持模态浮层 10 | 6. 对移动端支持友好 11 | 6. 轻量（css+js=7kb），不依赖 jQuery 等外部库 12 | 13 | 演示站点： 14 | 15 | ## 使用 16 | 17 | 支持使用 script 标签或者 webpack、requirejs、seajs 调用： 18 | 19 | ### script 20 | 21 | 调用 22 | 23 | ```html 24 | 25 | 26 | 29 | ``` 30 | 31 | ### webpack 32 | 33 | 安装 34 | ``` shell 35 | npm install angular-popups 36 | ``` 37 | 38 | 调用 39 | ```js 40 | require('angular-popups'); 41 | var app = angular.module('app', ['angular-popups']); 42 | ``` 43 | 44 | > angular-popups 依赖 `angular` 这个全局模块 45 | 46 | ## 指令 47 | 48 | 包含如下浮层指令： 49 | 50 | * [`dialog` 对话框指令](#dialog) 51 | * [`bubble` 气泡指令](#bubble) 52 | * [`notice` 通知消息指令](#notice) 53 | * [`popup` 透明浮层指令](#popup) 54 | 55 | ### 浮层通用参数 56 | 57 | | 名称 | 说明 | 58 | | ------------ | ---------------------------------------- | 59 | | ng-if | 显示或隐藏浮层（DOM 插入或删除） | 60 | | ng-show | 显示浮层 | 61 | | ng-hide | 隐藏浮层 | 62 | | for | 指定元素对齐，传入目标元素 ID 即可 | 63 | | align | 对齐的参数，此参数需要与 `for` 配合使用。默认 `"bottom left"`，可选值：`"top left"` `"top"` `"top right"` `"right top"` `"right"` `"right bottom"` `"bottom right"` `"bottom"` `"bottom left"` `"left bottom"` `"left"` `"left top"` | 64 | | fixed | 使用固定定位，等同于 CSS `position:fixed` | 65 | | modal | 模态浮层 | 66 | | duration | 自动关闭的时间（单位毫秒） | 67 | | close | 浮层关闭事件 | 68 | | close-action | 配置浮层由什么动作来触发关闭（执行 `close` 事件）。默认 `"esc timeout"` ，所有支持的动作： `"esc timeout outerchick click"` | 69 | 70 | > `ng-if`、`ng-show` 如果传入的是 `$event`，则浮层会定位到事件触发位置 71 | 72 | ## dialog 73 | 74 | 对话框指令 75 | 76 | ### 子指令 77 | 78 | | 名称 | 说明 | 79 | | ---------------- | -------- | 80 | | dialog-title | 对话框标题容器 | 81 | | dialog-content | 对话框内容容器 | 82 | | dialog-buttons | 对话框按钮容器 | 83 | | dialog-statusbar | 对话框状态栏容器 | 84 | 85 | > 对话框子指令中的事件可以使用 `$close()` 这个函数，它会调用通用参数 `close` 中的表达式 86 | 87 | ### 示例 88 | 89 | ```html 90 | 94 | ``` 95 | 96 | 在线演示： 97 | 98 | 1. [普通对话框](https://aui.github.io/angular-popups/example/dialog-ng-if.html) 99 | 2. [模态对话框](https://aui.github.io/angular-popups/example/dialog-modal.html) 100 | 3. [带按钮的对话框](https://aui.github.io/angular-popups/example/dialog-dialog-buttons.html) 101 | 4. [带状态栏的对话框](https://aui.github.io/angular-popups/example/dialog-dialog-statusbar.html) 102 | 5. [无标题的对话框](https://aui.github.io/angular-popups/example/dialog-dialog-title.html) 103 | 6. [无关闭按钮的对话框](https://aui.github.io/angular-popups/example/dialog-close.html) 104 | 7. [带箭头的对话框](https://aui.github.io/angular-popups/example/dialog-for-align.html) 105 | 8. [fixed 定位的对话框](https://aui.github.io/angular-popups/example/dialog-fixed.html) 106 | 9. [定时关闭的对话框](https://aui.github.io/angular-popups/example/dialog-duration.html) 107 | 10. [外部点击可关闭的对话框](https://aui.github.io/angular-popups/example/dialog-close-action) 108 | 109 | ## bubble 110 | 111 | 气泡浮层指令 112 | 113 | ### 示例 114 | 115 | ```html 116 | 117 | 118 | hello world 119 | 120 | ``` 121 | 122 | 在线演示： 123 | 124 | 1. [普通气泡](https://aui.github.io/angular-popups/example/bubble.html) 125 | 2. [自定义气泡方向](https://aui.github.io/angular-popups/example/bubble-for-align.html) 126 | 3. [不被关闭的气泡](https://aui.github.io/angular-popups/example/bubble-close.html) 127 | 128 | ## notice 129 | 130 | 通知消息指令 131 | 132 | ### 示例 133 | 134 | ```html 135 | 136 | hello world 137 | 138 | ``` 139 | 140 | 在线演示： 141 | 142 | 1. [普通通知浮层](https://aui.github.io/angular-popups/example/notice.html) 143 | 2. [模态通知浮层](https://aui.github.io/angular-popups/example/notice-modal.html) 144 | 145 | ## popup 146 | 147 | 透明浮层指令 148 | 149 | > 无任何样式，可以用来制作自定义形状的浮层 150 | 151 | ### 示例 152 | 153 | ```html 154 | 155 | 156 | 157 | ``` 158 | 159 | 在线演示： 160 | 161 | 1. [自定义浮层](https://aui.github.io/angular-popups/example/popup.html) 162 | 2. [创建右键菜单](https://aui.github.io/angular-popups/example/popup-contextmenu.html) 163 | 164 | ## 服务 165 | 166 | 若想在 js 代码中调用浮层相关控件，可以使用 `Popup` 服务。 167 | 168 | ### 方法 169 | 170 | * Popup.alert(content, ok) 171 | * Popup.confirm(content, ok, cancel) 172 | * Popup.notice(content, duration, ok); 173 | 174 | > `Popup` 服务仅支持文本消息，HTML 内容请使用指令 175 | 176 | ### 配置 177 | 178 | 配置默认的标题以及按钮文案 179 | 180 | ```js 181 | app.config(function (PopupProvider) { 182 | PopupProvider.title = '提示'; 183 | PopupProvider.okValue = '确定'; 184 | PopupProvider.cancelValue = '取消'; 185 | }); 186 | ``` 187 | 188 | ### 示例 189 | 190 | ```js 191 | app.controller('testCtrl', function($scope, Popup) { 192 | Popup.alert('hello world', function () { 193 | console.log('ok'); 194 | }); 195 | }); 196 | ``` 197 | 198 | 在线演示： 199 | 200 | 1. [在控制器中使用 `Popup` 服务](https://aui.github.io/angular-popups/example/services.html) 201 | 202 | ## 兼容性 203 | 204 | * Chrome 205 | * Firefox 206 | * IE9+ 207 | 208 | ## 更新日志 209 | 210 | [CHANGELOG.md](./CHANGELOG.md) 211 | 212 | ## 许可 213 | 214 | [MIT](./LICENSE) 215 | 216 | ----------------- 217 | 218 | ![支付宝二维码](http://aui.github.io/angular-popups/qr-alipay.png) 219 | 220 | 喜欢这个项目？捐助一杯咖啡支持下（￥28） -------------------------------------------------------------------------------- /src/directives/directives.js: -------------------------------------------------------------------------------- 1 | /* global require,module */ 2 | 3 | 'use strict'; 4 | 5 | var angular = require('angular'); 6 | var $ = angular.element; 7 | var Popup = require('../lib/popup'); 8 | var ngModule = require('../ng-module'); 9 | var noop = function() {}; 10 | 11 | 12 | ngModule.createPopup = function(name, options) { 13 | return ngModule.directive(name, function() { 14 | 15 | var directive = { 16 | template: options.template, 17 | restrict: 'AE', 18 | transclude: true, 19 | replace: true, 20 | scope: { 21 | 22 | 'ngIf': '=', 23 | 'ngShow': '=', 24 | 'ngHide': '=', 25 | 26 | 'close': '&', 27 | 28 | // 关闭对话框的动作 29 | 'closeAction': '@', 30 | 31 | // 吸附到指定 ID 元素 32 | 'for': '@', 33 | 34 | // 对齐方式，配合 `for` 才能使用 35 | 'align': '@', 36 | 37 | // 是否固定定位（跟随滚动条） 38 | 'fixed': '@', 39 | 40 | // 是否是模态浮层 41 | 'modal': '@', 42 | 43 | // 显示持续时间 44 | 'duration': '@' 45 | 46 | }, 47 | controller: ['$scope', function($scope) { 48 | // 默认的触发关闭动作 49 | this.closeAction = ['esc', 'timeout']; 50 | 51 | this.close = function(isUiEvent) { 52 | $scope.close(); 53 | if (isUiEvent) { 54 | $scope.$apply(); 55 | } 56 | }; 57 | }], 58 | link: function(scope, elem, attrs, controller) { 59 | 60 | var popup = new Popup({ 61 | node: elem[0], 62 | fixed: attrToBoolean(attrs.fixed), 63 | align: attrs.align, 64 | showElement: noop, 65 | hideElement: noop, 66 | removeElement: noop 67 | }); 68 | 69 | var temp = fix(elem); 70 | var $document = $(document); 71 | 72 | if (attrs.closeAction) { 73 | controller.closeAction = attrs.closeAction.split(/\s+/); 74 | } 75 | 76 | 77 | // 模型同步UI显示、隐藏事件 78 | if (attrs.ngIf) scope.$watch('ngIf', change); 79 | if (attrs.ngShow) scope.$watch('ngShow', change); 80 | if (attrs.ngHide) scope.$watch('ngHide', function(value) { 81 | change(!value); 82 | }); 83 | 84 | 85 | // ng 销毁事件控制对话框关闭 86 | // 控制器销毁或者 ng-if="false" 都可能触发此 87 | // scope.$on('$destroy', callback) >> 这种方式对 ngAnimate 支持不好 88 | elem.one('$destroy', function() { 89 | change(false); 90 | popup.remove(); 91 | temp.remove(); 92 | }); 93 | 94 | 95 | // UI 的显示与隐藏、删除事件 96 | function change(open) { 97 | 98 | var anchor = getAnchor(attrs['for']); 99 | 100 | if (angular.isUndefined(open)) { 101 | return; 102 | } 103 | 104 | if (angular.isObject(open)) { 105 | // HTMLElement, Event 106 | anchor = open; 107 | } 108 | 109 | if (open) { 110 | // 使用 setTimeout 等待 ng-show 在 UI 上生效 111 | elem.css('visibility', 'hidden'); 112 | setTimeout(function() { 113 | elem.css('visibility', 'visible'); 114 | popup[attrToBoolean(attrs.modal) ? 'showModal' : 'show'](anchor); 115 | setEvent(open); 116 | }, 0); 117 | } else { 118 | popup.close(); 119 | setEvent(open); 120 | } 121 | 122 | } 123 | 124 | 125 | function getAnchor(id) { 126 | return document.getElementById(id); 127 | } 128 | 129 | 130 | function attrToBoolean(value) { 131 | return typeof value === 'string'; 132 | } 133 | 134 | 135 | // ESC 快捷键关闭浮层 136 | function esc(event) { 137 | 138 | var target = event.target; 139 | var nodeName = target.nodeName; 140 | var rinput = /^input|textarea$/i; 141 | var isBlur = Popup.current === popup; 142 | var isInput = rinput.test(nodeName) && target.type !== 'button'; 143 | var keyCode = event.keyCode; 144 | 145 | // 避免输入状态中 ESC 误操作关闭 146 | if (!isBlur || isInput) { 147 | return; 148 | } 149 | 150 | if (keyCode === 27) { 151 | controller.close(event); 152 | } 153 | } 154 | 155 | 156 | // 外部点击关闭 157 | function outerclick(event) { 158 | if (!elem[0].contains(event.target)) { 159 | controller.close(event); 160 | } 161 | } 162 | 163 | 164 | // 定时关闭 165 | function timeout() { 166 | if (attrs.duration) { 167 | timeout.timer = setTimeout(function() { 168 | controller.close(true); 169 | }, Number(attrs.duration)); 170 | } 171 | } 172 | 173 | 174 | function setEvent(open) { 175 | controller.closeAction.forEach(function(action) { 176 | switch (action) { 177 | case 'esc': 178 | if (open) { 179 | $document.on('keydown', esc); 180 | } else { 181 | $document.off('keydown', esc); 182 | } 183 | break; 184 | case 'timeout': 185 | if (open) { 186 | timeout(); 187 | } else { 188 | clearTimeout(timeout.timer); 189 | } 190 | break; 191 | case 'outerchick': 192 | if (open) { 193 | $document 194 | .on('ontouchend', outerclick) 195 | .on('click', outerclick); 196 | } else { 197 | $document 198 | .off('ontouchend', outerclick) 199 | .off('click', outerclick); 200 | } 201 | break; 202 | case 'click': 203 | //case 'focusout': // Error: [$rootScope:inprog] 204 | if (open) { 205 | elem.on(action, controller.close); 206 | } else { 207 | elem.off(action, controller.close); 208 | } 209 | break; 210 | } 211 | }); 212 | } 213 | 214 | 215 | (options.link || function() {}).apply(this, arguments); 216 | 217 | } 218 | }; 219 | 220 | 221 | angular.extend(directive.scope, options.scope); 222 | 223 | 224 | return directive; 225 | }); 226 | }; 227 | 228 | 229 | // AngularJS(v1.4.8) BUG： 230 | // 如果指令内部把 DOM 节点迁移到 document.body 下， 231 | // 则指令元素的 ng-if 为 false 的时候可能导致其他 popup 节点被 AngularJS 删除 232 | function fix(elem) { 233 | var temp = document.createElement('popup'); 234 | document.body.appendChild(temp); 235 | temp.appendChild(elem[0]); 236 | return $(temp); 237 | } 238 | 239 | module.exports = ngModule; -------------------------------------------------------------------------------- /dist/angular-popups-nocss.js: -------------------------------------------------------------------------------- 1 | /*! angular-popups@0.0.2 | https://github.com/aui/angular-popups */ 2 | !function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return t[o].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";n(10),n(7),n(8),n(9),n(12),t.exports={}},function(t,e,n){"use strict";function o(t){var e=document.createElement("popup");return document.body.appendChild(e),e.appendChild(t[0]),s(e)}var i=n(2),s=i.element,c=n(11),u=n(3),a=function(){};u.createPopup=function(t,e){return u.directive(t,function(){var t={template:e.template,restrict:"AE",transclude:!0,replace:!0,scope:{ngIf:"=",ngShow:"=",ngHide:"=",close:"&",closeAction:"@","for":"@",align:"@",fixed:"@",modal:"@",duration:"@"},controller:["$scope",function(t){this.closeAction=["esc","timeout"],this.close=function(e){t.close(),e&&t.$apply()}}],link:function(t,n,u,r){function l(t){var e=d(u["for"]);i.isUndefined(t)||(i.isObject(t)&&(e=t),t?(n.css("visibility","hidden"),setTimeout(function(){n.css("visibility","visible"),g[p(u.modal)?"showModal":"show"](e),v(t)},0)):(g.close(),v(t)))}function d(t){return document.getElementById(t)}function p(t){return"string"==typeof t}function f(t){var e=t.target,n=e.nodeName,o=/^input|textarea$/i,i=c.current===g,s=o.test(n)&&"button"!==e.type,u=t.keyCode;i&&!s&&27===u&&r.close(t)}function h(t){n[0].contains(t.target)||r.close(t)}function m(){u.duration&&(m.timer=setTimeout(function(){r.close(!0)},Number(u.duration)))}function v(t){r.closeAction.forEach(function(e){switch(e){case"esc":t?b.on("keydown",f):b.off("keydown",f);break;case"timeout":t?m():clearTimeout(m.timer);break;case"outerchick":t?b.on("ontouchend",h).on("click",h):b.off("ontouchend",h).off("click",h);break;case"click":t?n.on(e,r.close):n.off(e,r.close)}})}var g=new c({node:n[0],fixed:p(u.fixed),align:u.align,showElement:a,hideElement:a,removeElement:a}),$=o(n),b=s(document);u.closeAction&&(r.closeAction=u.closeAction.split(/\s+/)),u.ngIf&&t.$watch("ngIf",l),u.ngShow&&t.$watch("ngShow",l),u.ngHide&&t.$watch("ngHide",function(t){l(!t)}),n.one("$destroy",function(){l(!1),g.remove(),$.remove()}),(e.link||function(){}).apply(this,arguments)}};return i.extend(t.scope,e.scope),t})},t.exports=u},function(t,e){t.exports=angular},function(t,e,n){t.exports=n(2).module("angular-popups",[])},,,,function(t,e,n){"use strict";var o=n(1);o.createPopup("bubble",{template:'',link:function(t,e,n,o){n.closeAction||(o.closeAction=["esc","timeout","outerchick"])}})},function(t,e,n){"use strict";function o(t,e){c.directive(t,function(){return i.extend({require:"^dialog",restrict:"AE",transclude:!0,link:function(t,e,n,o){t.$dialogId="ui-dialog"+t.$parent.$id,t.$close=o.close},replace:!0},e)})}var i=n(2),s=i.element,c=n(1),u='

',a='

',r='',l='

',d='',p='';c.createPopup("dialog",{template:'',link:function(t,e,n,o){function i(t){var e=document.createElement("div");return e.innerHTML=t,e.firstChild}function c(t,e){e&&t.appendChild(e)}var a=e[0],l=i(u);t.$dialogId="ui-dialog"+t.$id;var d=function(t){var e="dialog",n=e+"-"+t,o=e+"\\:"+t,i="["+n+"]",s="["+o+"]",c=".ui-dialog-"+t;return a.querySelector([n,o,i,s,c].join(","))},p=function(t){return l.querySelector(".ui-dialog-"+t)},f=n.close?i(r):null,h=d("title"),m=d("content"),v=d("statusbar"),g=d("buttons"),$=p("header"),b=p("body"),_=p("footer");c($,f),c($,h),c(b,m),c(_,v),c(_,g),h||s($).remove(),v||g||s(_).remove(),f&&f.addEventListener("click",o.close,!1),c(a,l)}}),o("dialogTitle",{template:a}),o("dialogContent",{template:l}),o("dialogStatusbar",{template:d}),o("dialogButtons",{template:p})},function(t,e,n){"use strict";var o=n(1);o.createPopup("notice",{template:''})},function(t,e,n){"use strict";var o=n(1);o.createPopup("popup",{template:''})},function(t,e){"use strict";function n(t){this.options=Object.create(n.defaults),Object.keys(t||{}).forEach(function(e){var n=t[e];"undefined"!=typeof n&&(this.options[e]=n)},this);var e=this.options.node||document.createElement("div");e.style.position="absolute",e.setAttribute("tabindex","-1"),document.body.appendChild(e),this.options.hideElement(e),this.node=e,this.destroyed=!1}function o(t){return document.documentElement["client"+t]}function i(t){var e={Left:"pageXOffset",Top:"pageYOffset"};return window[e[t]]}function s(t){t.parentNode.removeChild(t)}function c(t){t.style.display="block"}function u(t){t.style.display="none"}function a(t,e){return t.className.match(new RegExp("(\\s|^)"+e+"(\\s|$)"))}function r(t,e){a(t,e)||(t.className+=" "+e)}function l(t,e){if(a(t,e)){var n=new RegExp("(\\s|^)"+e+"(\\s|$)");t.className=t.className.replace(n," ")}}function d(t,e,n){t.addEventListener(e,n,!1)}function p(t,e,n){t.removeEventListener(e,n)}function f(){try{var t=document.activeElement,e=t.contentDocument,n=e&&e.activeElement||t;return n}catch(o){}}n.defaults={node:null,fixed:!1,autofocus:!0,align:"bottom left",className:"ui-popup",showElement:c,hideElement:u,removeElement:s},n.prototype={constructor:n,destroyed:!0,open:!1,returnValue:"",show:function(t){if(this.destroyed)return this;var e=this.node;return this.__activeElement=f(),this.open=!0,this.anchor=t,r(e,this.options.className),r(e,this.__name("show")),e.setAttribute("role",this.modal?"alertdialog":"dialog"),this.__show||(this.focus=this.focus.bind(this),this.reset=this.reset.bind(this),this.__show=!0),this.modal&&(r(e,this.__name("modal")),d(document,"focusin",this.focus)),this.options.showElement(e),d(window,"resize",this.reset),this.reset().focus(),this},showModal:function(){return this.modal=!0,this.show.apply(this,arguments)},close:function(t){if(!this.destroyed&&this.open){var e=this.node;void 0!==t&&(this.returnValue=t),l(e,this.__name("show")),l(e,this.__name("modal")),this.options.hideElement(e),this.open=!1,this.blur(),p(document,"focusin",this.focus),p(window,"resize",this.reset)}return this},remove:function(){if(this.destroyed)return this;this.open&&this.close(),n.current===this&&(n.current=null),this.options.removeElement(this.node);for(var t in this)delete this[t];return this},reset:function(){if(this.open){var t=this.anchor;return"string"==typeof t&&(t=this.anchor=document.querySelector(t)),this.node.style.position=this.options.fixed?"fixed":"absolute",t?this.__anchor(t):this.__center(),this}},focus:function(){var t=this.node,e=n.current,o=this.zIndex=n.zIndex++;if(e&&e!==this&&e.blur(!1),!t.contains(f())){var i=t.querySelector("[autofocus]");!this.__autofocus&&i?this.__autofocus=!0:i=t,this.__focus(i)}return t.style.zIndex=o,n.current=this,r(t,this.__name("focus")),this},blur:function(){var t=this.__activeElement,e=f(),n=arguments[0],o=this.node;return n!==!1&&o.contains(e)&&this.__focus(t),this.__autofocus=!1,l(o,this.__name("focus")),this},__name:function(t){return this.options.className+"-"+t},__focus:function(t){try{this.options.autofocus&&!/^iframe$/i.test(t.nodeName)&&t.focus()}catch(e){}},__center:function(){var t=this.node,e=this.options.fixed,n=e?0:i("Left"),s=e?0:i("Top"),c=o("Width"),u=o("Height"),a=t.offsetWidth,r=t.offsetHeight,l=(c-a)/2+n,d=382*(u-r)/1e3+s,p=t.style;p.left=Math.max(parseInt(l),n)+"px",p.top=Math.max(parseInt(d),s)+"px"},__anchor:function(t){function e(){if(n){var e=window,o=document.documentElement,i=t.getBoundingClientRect();return{top:i.top+e.pageYOffset-o.clientTop,left:i.left+e.pageXOffset-o.clientLeft}}return{left:t.pageX,top:t.pageY}}var n=t.parentNode&&t,s=this.node;if(this.__anchorClass&&(l(s,this.__anchorClass),l(s,this.__name("anchor"))),n&&t.offsetLeft*t.offsetTop<0)return this.__center();var c=this,u=this.options,a=u.fixed,d=o("Width"),p=o("Height"),f=i("Left"),h=i("Top"),m=s.offsetWidth,v=s.offsetHeight,g=t.offsetWidth||0,$=t.offsetHeight||0,b=e(),_=b.left,y=b.top,x=a?_-f:_,k=a?y-h:y,w=a?0:f,E=a?0:h,P=w+d-m,I=E+p-v,C={},A=u.align.split(" "),N=this.__name(""),T={top:"bottom",bottom:"top",left:"right",right:"left"},H={top:"top",bottom:"top",left:"left",right:"left"},L=[{top:k-v,bottom:k+$,left:x-m,right:x+g},{top:k,bottom:k-v+$,left:x,right:x-m+g}],O={left:x+g/2-m/2,top:k+$/2-v/2},S={left:[w,P],top:[E,I]};A.forEach(function(t,e){L[e][t]>S[H[t]][1]&&(t=A[e]=T[t]),L[e][t]

',r='{{$$Popup.content}}';i.extend(this,s),this.$get=["$compile","$rootScope",function(s,l){function d(n){if(!e){var d=o(a);document.body.appendChild(d),s(d)(l);var p=o(r);document.body.appendChild(p),s(p)(l),e=!0}var f=Object.create(c);return f=i.extend(f,t,n),f.$destroy=function(){delete l.$$Popup},l.$$Popup=f,u}return{alert:function(t,e){return d({content:t,ok:e||n})},confirm:function(t,e,o){return d({content:t,ok:e||n,cancel:o||n})},notice:function(t,e,o){return d({content:t,duration:e||2e3,ok:o||n,notice:!0})}}}]})}]); 3 | //# sourceMappingURL=angular-popups-nocss.js.map -------------------------------------------------------------------------------- /src/css/ui-dialog.css: -------------------------------------------------------------------------------- 1 | @import url('./ui-popup.css'); 2 | .ui-dialog { 3 | position: relative; 4 | background-color: #FFF; 5 | border: 1px solid rgba(0, 0, 0, .3); 6 | border-radius: 6px; 7 | outline: 0; 8 | background-clip: padding-box; 9 | font-size: 14px; 10 | line-height: 1.428571429; 11 | text-align: left; 12 | color: #333; 13 | } 14 | @media (max-width: 768px) { 15 | .ui-dialog { 16 | width: 90vw; 17 | } 18 | } 19 | .ui-popup-focus .ui-dialog { 20 | box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); 21 | } 22 | .ui-popup-modal .ui-dialog { 23 | box-shadow: none; 24 | } 25 | .ui-dialog-header { 26 | white-space: nowrap; 27 | } 28 | .ui-dialog-header::after { 29 | content: ''; 30 | display: block; 31 | height: 0; 32 | border-bottom: 1px solid #E5E5E5; 33 | } 34 | .ui-dialog-close { 35 | position: relative; 36 | float: right; 37 | top: 13px; 38 | right: 13px; 39 | margin-top: -1px; 40 | padding: 0; 41 | font-size: 21px; 42 | font-weight: bold; 43 | line-height: 1; 44 | color: #000; 45 | text-shadow: 0 1px 0 #FFF; 46 | opacity: .2; 47 | cursor: pointer; 48 | background: transparent; 49 | border: 0; 50 | -webkit-appearance: none; 51 | -webkit-tap-highlight-color:rgba(255,255,255,0); 52 | } 53 | .ui-dialog-close:hover, 54 | .ui-dialog-close:focus, 55 | .ui-dialog-close:active { 56 | color: #000; 57 | text-decoration: none; 58 | cursor: pointer; 59 | outline: 0; 60 | opacity: 0.5; 61 | } 62 | .ui-dialog-title { 63 | margin: 0; 64 | line-height: 1.428571429; 65 | min-height: 16.428571429px; 66 | padding: 15px; 67 | overflow:hidden; 68 | white-space: nowrap; 69 | text-overflow: ellipsis; 70 | font-weight: bold; 71 | cursor: default; 72 | } 73 | .ui-dialog-body { 74 | padding: 20px; 75 | text-align: center; 76 | } 77 | .ui-dialog-content { 78 | display: inline-block; 79 | position: relative; 80 | vertical-align: middle; 81 | text-align: left; 82 | } 83 | .ui-dialog-footer { 84 | padding: 0 20px 20px 20px; 85 | text-align: center; 86 | } 87 | .ui-dialog-footer::after { 88 | content: ''; 89 | display: block; 90 | clear: both; 91 | height: 0; 92 | overflow: hidden; 93 | } 94 | .ui-dialog-statusbar { 95 | float: left; 96 | margin-right: 20px; 97 | padding: 6px 0; 98 | line-height: 1.428571429; 99 | font-size: 14px; 100 | color: #888; 101 | white-space: nowrap; 102 | } 103 | .ui-dialog-statusbar label:hover { 104 | color: #333; 105 | } 106 | .ui-dialog-statusbar input, 107 | .ui-dialog-statusbar .label { 108 | vertical-align: middle; 109 | } 110 | .ui-dialog-buttons { 111 | float: right; 112 | white-space: nowrap; 113 | } 114 | .ui-dialog-footer button+button { 115 | margin-bottom: 0; 116 | margin-left: 5px; 117 | } 118 | .ui-dialog-footer button { 119 | width:auto; 120 | overflow:visible; 121 | display: inline-block; 122 | padding: 6px 12px; 123 | margin-bottom: 0; 124 | font-size: 14px; 125 | font-weight: normal; 126 | line-height: 1.428571429; 127 | text-align: center; 128 | white-space: nowrap; 129 | vertical-align: middle; 130 | cursor: pointer; 131 | background-image: none; 132 | border: 1px solid transparent; 133 | border-radius: 4px; 134 | -webkit-user-select: none; 135 | -moz-user-select: none; 136 | -ms-user-select: none; 137 | -o-user-select: none; 138 | user-select: none; 139 | } 140 | 141 | .ui-dialog-footer button:focus { 142 | outline: thin dotted #333; 143 | outline: 5px auto -webkit-focus-ring-color; 144 | outline-offset: -2px; 145 | } 146 | 147 | .ui-dialog-footer button:hover, 148 | .ui-dialog-footer button:focus { 149 | color: #333333; 150 | text-decoration: none; 151 | } 152 | 153 | .ui-dialog-footer button:active { 154 | background-image: none; 155 | outline: 0; 156 | -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); 157 | box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); 158 | } 159 | .ui-dialog-footer button:disabled { 160 | pointer-events: none; 161 | cursor: not-allowed; 162 | opacity: 0.65; 163 | -webkit-box-shadow: none; 164 | box-shadow: none; 165 | } 166 | 167 | .ui-dialog-footer button { 168 | color: #333333; 169 | background-color: #ffffff; 170 | border-color: #cccccc; 171 | } 172 | 173 | .ui-dialog-footer button:hover, 174 | .ui-dialog-footer button:focus, 175 | .ui-dialog-footer button:active { 176 | color: #333333; 177 | background-color: #ebebeb; 178 | border-color: #adadad; 179 | } 180 | 181 | .ui-dialog-footer button:active{ 182 | background-image: none; 183 | } 184 | 185 | .ui-dialog-footer button:disabled, 186 | .ui-dialog-footer button:disabled:hover, 187 | .ui-dialog-footer button:disabled:focus, 188 | .ui-dialog-footer button:disabled:active { 189 | background-color: #ffffff; 190 | border-color: #cccccc; 191 | } 192 | 193 | .ui-dialog-footer button[autofocus] { 194 | color: #ffffff; 195 | background-color: #428bca; 196 | border-color: #357ebd; 197 | } 198 | 199 | .ui-dialog-footer button[autofocus]:hover, 200 | .ui-dialog-footer button[autofocus]:focus, 201 | .ui-dialog-footer button[autofocus]:active { 202 | color: #ffffff; 203 | background-color: #3276b1; 204 | border-color: #285e8e; 205 | } 206 | 207 | .ui-dialog-footer button[autofocus]:active { 208 | background-image: none; 209 | } 210 | .ui-popup-top-left .ui-dialog, 211 | .ui-popup-top .ui-dialog, 212 | .ui-popup-top-right .ui-dialog { 213 | top: -8px; 214 | } 215 | .ui-popup-bottom-left .ui-dialog, 216 | .ui-popup-bottom .ui-dialog, 217 | .ui-popup-bottom-right .ui-dialog { 218 | top: 8px; 219 | } 220 | .ui-popup-left-top .ui-dialog, 221 | .ui-popup-left .ui-dialog, 222 | .ui-popup-left-bottom .ui-dialog { 223 | left: -8px; 224 | } 225 | .ui-popup-right-top .ui-dialog, 226 | .ui-popup-right .ui-dialog, 227 | .ui-popup-right-bottom .ui-dialog { 228 | left: 8px; 229 | } 230 | 231 | .ui-dialog::before, 232 | .ui-dialog::after { 233 | content: ''; 234 | position: absolute; 235 | display: none; 236 | width: 0; 237 | height: 0; 238 | overflow:hidden; 239 | border:8px dashed transparent; 240 | } 241 | .ui-popup-anchor .ui-dialog::before, 242 | .ui-popup-anchor .ui-dialog::after{ 243 | display: block; 244 | } 245 | .ui-popup-top-left .ui-dialog::before, 246 | .ui-popup-top .ui-dialog::before, 247 | .ui-popup-top-right .ui-dialog::before { 248 | bottom: -16px; 249 | border-top:8px solid #7C7C7C; 250 | } 251 | .ui-popup-top-left .ui-dialog::after, 252 | .ui-popup-top .ui-dialog::after, 253 | .ui-popup-top-right .ui-dialog::after { 254 | bottom: -15px; 255 | border-top:8px solid #fff; 256 | } 257 | .ui-popup-top-left .ui-dialog::before, 258 | .ui-popup-top-left .ui-dialog::after { 259 | left: 15px; 260 | } 261 | .ui-popup-top .ui-dialog::before, 262 | .ui-popup-top .ui-dialog::after { 263 | left: 50%; 264 | margin-left: -8px; 265 | } 266 | .ui-popup-top-right .ui-dialog::before, 267 | .ui-popup-top-right .ui-dialog::after { 268 | right: 15px; 269 | } 270 | .ui-popup-bottom-left .ui-dialog::before, 271 | .ui-popup-bottom .ui-dialog::before, 272 | .ui-popup-bottom-right .ui-dialog::before { 273 | top: -16px; 274 | border-bottom:8px solid #7C7C7C; 275 | } 276 | .ui-popup-bottom-left .ui-dialog::after, 277 | .ui-popup-bottom .ui-dialog::after, 278 | .ui-popup-bottom-right .ui-dialog::after { 279 | top: -15px; 280 | border-bottom:8px solid #fff; 281 | } 282 | .ui-popup-bottom-left .ui-dialog::before, 283 | .ui-popup-bottom-left .ui-dialog::after { 284 | left: 15px; 285 | } 286 | .ui-popup-bottom .ui-dialog::before, 287 | .ui-popup-bottom .ui-dialog::after { 288 | margin-left: -8px; 289 | left: 50%; 290 | } 291 | .ui-popup-bottom-right .ui-dialog::before, 292 | .ui-popup-bottom-right .ui-dialog::after { 293 | right: 15px; 294 | } 295 | .ui-popup-left-top .ui-dialog::before, 296 | .ui-popup-left .ui-dialog::before, 297 | .ui-popup-left-bottom .ui-dialog::before { 298 | right: -16px; 299 | border-left:8px solid #7C7C7C; 300 | } 301 | .ui-popup-left-top .ui-dialog::after, 302 | .ui-popup-left .ui-dialog::after, 303 | .ui-popup-left-bottom .ui-dialog::after { 304 | right: -15px; 305 | border-left:8px solid #fff; 306 | } 307 | .ui-popup-left-top .ui-dialog::before, 308 | .ui-popup-left-top .ui-dialog::after { 309 | top: 15px; 310 | } 311 | .ui-popup-left .ui-dialog::before, 312 | .ui-popup-left .ui-dialog::after { 313 | margin-top: -8px; 314 | top: 50%; 315 | } 316 | .ui-popup-left-bottom .ui-dialog::before, 317 | .ui-popup-left-bottom .ui-dialog::after { 318 | bottom: 15px; 319 | } 320 | .ui-popup-right-top .ui-dialog::before, 321 | .ui-popup-right .ui-dialog::before, 322 | .ui-popup-right-bottom .ui-dialog::before { 323 | left: -16px; 324 | border-right:8px solid #7C7C7C; 325 | } 326 | .ui-popup-right-top .ui-dialog::after, 327 | .ui-popup-right .ui-dialog::after, 328 | .ui-popup-right-bottom .ui-dialog::after { 329 | left: -15px; 330 | border-right:8px solid #fff; 331 | } 332 | .ui-popup-right-top .ui-dialog::before, 333 | .ui-popup-right-top .ui-dialog::after { 334 | top: 15px; 335 | } 336 | .ui-popup-right .ui-dialog::before, 337 | .ui-popup-right .ui-dialog::after { 338 | margin-top: -8px; 339 | top: 50%; 340 | } 341 | .ui-popup-right-bottom .ui-dialog::before, 342 | .ui-popup-right-bottom .ui-dialog::after { 343 | bottom: 15px; 344 | } 345 | 346 | .ui-dialog-loading { 347 | vertical-align: middle; 348 | display: inline-block; 349 | overflow: hidden; 350 | width: 32px; 351 | height: 32px; 352 | font-size: 0; 353 | text-indent: -999em; 354 | color: #666; 355 | } 356 | .ui-dialog-loading { 357 | width: 100%\9; 358 | text-indent: 0\9; 359 | line-height: 32px\9; 360 | text-align: center\9; 361 | font-size: 12px\9; 362 | } 363 | 364 | .ui-dialog-loading::after { 365 | position: absolute; 366 | content: ''; 367 | width: 3px; 368 | height: 3px; 369 | margin: 14.5px 0 0 14.5px; 370 | border-radius: 100%; 371 | box-shadow: 0 -10px 0 1px #ccc, 10px 0px #ccc, 0 10px #ccc, -10px 0 #ccc, -7px -7px 0 0.5px #ccc, 7px -7px 0 1.5px #ccc, 7px 7px #ccc, -7px 7px #ccc; 372 | -webkit-transform: rotate(360deg); 373 | -webkit-animation: ui-dialog-loading 1.5s infinite linear; 374 | transform: rotate(360deg); 375 | animation: ui-dialog-loading 1.5s infinite linear; 376 | display: none\9; 377 | } 378 | 379 | @-webkit-keyframes ui-dialog-loading { 380 | 0% {-webkit-transform: rotate(0deg);} 381 | 100% {-webkit-transform: rotate(360deg);} 382 | } 383 | @keyframes ui-dialog-loading { 384 | 0% {transform: rotate(0deg);} 385 | 100% {transform: rotate(360deg);} 386 | } 387 | -------------------------------------------------------------------------------- /src/lib/popup.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | 4 | /** 5 | * @param {HTMLElement} 浮层元素（可选） 6 | */ 7 | function Popup(options) { 8 | 9 | // 合并默认配置 10 | this.options = Object.create(Popup.defaults); 11 | Object.keys(options || {}).forEach(function (key) { 12 | var value = options[key]; 13 | if (typeof value !== 'undefined') { 14 | this.options[key] = value; 15 | } 16 | }, this); 17 | 18 | 19 | var node = this.options.node || document.createElement('div'); 20 | node.style.position = 'absolute'; 21 | node.setAttribute('tabindex', '-1'); 22 | document.body.appendChild(node); 23 | 24 | this.options.hideElement(node); 25 | this.node = node; 26 | this.destroyed = false; 27 | } 28 | 29 | 30 | Popup.defaults = { 31 | /** 浮层 DOM 素节点 */ 32 | node: null, 33 | 34 | /** 是否开启固定定位 */ 35 | fixed: false, 36 | 37 | /** 是否自动聚焦 */ 38 | autofocus: true, 39 | 40 | /** 对齐方式 */ 41 | align: 'bottom left', 42 | 43 | /** CSS 类名 */ 44 | className: 'ui-popup', 45 | 46 | showElement: showElement, 47 | hideElement: hideElement, 48 | removeElement: removeElement 49 | }; 50 | 51 | 52 | Popup.prototype = { 53 | 54 | constructor: Popup, 55 | 56 | /** 判断是否删除[只读] */ 57 | destroyed: true, 58 | 59 | /** 判断是否显示[只读] */ 60 | open: false, 61 | 62 | /** close 返回值 */ 63 | returnValue: '', 64 | 65 | /** 66 | * 显示浮层 67 | * @param {HTMLElement, Event} 指定位置（可选） 68 | */ 69 | show: function(anchor) { 70 | 71 | if (this.destroyed) { 72 | return this; 73 | } 74 | 75 | var node = this.node; 76 | 77 | this.__activeElement = getActiveElement(); 78 | 79 | this.open = true; 80 | this.anchor = anchor; 81 | 82 | 83 | addClass(node, this.options.className); 84 | addClass(node, this.__name('show')); 85 | node.setAttribute('role', this.modal ? 'alertdialog' : 'dialog'); 86 | 87 | 88 | if (!this.__show) { 89 | this.focus = this.focus.bind(this); 90 | this.reset = this.reset.bind(this); 91 | this.__show = true; 92 | } 93 | 94 | 95 | // 模态浮层的遮罩 96 | if (this.modal) { 97 | 98 | addClass(node, this.__name('modal')); 99 | 100 | // 让焦点限制在浮层内 101 | addEvent(document, 'focusin', this.focus); 102 | } 103 | 104 | 105 | this.options.showElement(node); 106 | 107 | 108 | addEvent(window, 'resize', this.reset); 109 | 110 | this.reset().focus(); 111 | 112 | return this; 113 | }, 114 | 115 | 116 | /** 显示模态浮层。参数参见 show() */ 117 | showModal: function() { 118 | this.modal = true; 119 | return this.show.apply(this, arguments); 120 | }, 121 | 122 | 123 | /** 关闭浮层 */ 124 | close: function(result) { 125 | 126 | if (!this.destroyed && this.open) { 127 | 128 | var node = this.node; 129 | 130 | if (result !== undefined) { 131 | this.returnValue = result; 132 | } 133 | 134 | removeClass(node, this.__name('show')); 135 | removeClass(node, this.__name('modal')); 136 | 137 | this.options.hideElement(node); 138 | 139 | this.open = false; 140 | this.blur(); // 恢复焦点，照顾键盘操作的用户 141 | 142 | removeEvent(document, 'focusin', this.focus); 143 | removeEvent(window, 'resize', this.reset); 144 | } 145 | 146 | return this; 147 | }, 148 | 149 | 150 | /** 销毁浮层 */ 151 | remove: function() { 152 | 153 | if (this.destroyed) { 154 | return this; 155 | } 156 | 157 | 158 | if (this.open) { 159 | this.close(); 160 | } 161 | 162 | 163 | if (Popup.current === this) { 164 | Popup.current = null; 165 | } 166 | 167 | 168 | this.options.removeElement(this.node); 169 | 170 | 171 | for (var i in this) { 172 | delete this[i]; 173 | } 174 | 175 | return this; 176 | }, 177 | 178 | 179 | /** 重置位置 */ 180 | reset: function() { 181 | 182 | if (!this.open) { 183 | return; 184 | } 185 | 186 | var anchor = this.anchor; 187 | 188 | if (typeof anchor === 'string') { 189 | anchor = this.anchor = document.querySelector(anchor); 190 | } 191 | 192 | this.node.style.position = this.options.fixed ? 'fixed' : 'absolute'; 193 | 194 | if (anchor) { 195 | this.__anchor(anchor); 196 | } else { 197 | this.__center(); 198 | } 199 | 200 | return this; 201 | }, 202 | 203 | 204 | /** 让浮层获取焦点 */ 205 | focus: function() { 206 | 207 | var node = this.node; 208 | var current = Popup.current; 209 | var index = this.zIndex = Popup.zIndex++; 210 | 211 | if (current && current !== this) { 212 | current.blur(false); 213 | } 214 | 215 | // 检查焦点是否在浮层里面 216 | if (!node.contains(getActiveElement())) { 217 | var autofocus = node.querySelector('[autofocus]'); 218 | 219 | if (!this.__autofocus && autofocus) { 220 | this.__autofocus = true; 221 | } else { 222 | autofocus = node; 223 | } 224 | 225 | this.__focus(autofocus); 226 | } 227 | 228 | // 设置叠加高度 229 | node.style.zIndex = index; 230 | 231 | 232 | Popup.current = this; 233 | addClass(node, this.__name('focus')); 234 | 235 | return this; 236 | }, 237 | 238 | 239 | /** 让浮层失去焦点。将焦点退还给之前的元素，照顾视力障碍用户 */ 240 | blur: function() { 241 | 242 | var activeElement = this.__activeElement; 243 | var now = getActiveElement(); 244 | var isBlur = arguments[0]; 245 | var node = this.node; 246 | 247 | if (isBlur !== false && node.contains(now)) { 248 | this.__focus(activeElement); 249 | } 250 | 251 | this.__autofocus = false; 252 | removeClass(node, this.__name('focus')); 253 | 254 | return this; 255 | }, 256 | 257 | 258 | __name: function(name) { 259 | return this.options.className + '-' + name; 260 | }, 261 | 262 | 263 | // 对元素安全聚焦 264 | __focus: function(elem) { 265 | // 防止 iframe 跨域无权限报错 266 | // 防止 IE 不可见元素报错 267 | try { 268 | // ie11 bug: iframe 页面点击会跳到顶部 269 | if (this.options.autofocus && !/^iframe$/i.test(elem.nodeName)) { 270 | elem.focus(); 271 | } 272 | } catch (e) {} 273 | }, 274 | 275 | 276 | // 居中浮层 277 | __center: function() { 278 | 279 | var node = this.node; 280 | var fixed = this.options.fixed; 281 | var dl = fixed ? 0 : getDocumentScroll('Left'); 282 | var dt = fixed ? 0 : getDocumentScroll('Top'); 283 | var ww = getWindowSize('Width'); 284 | var wh = getWindowSize('Height'); 285 | var ow = node.offsetWidth; 286 | var oh = node.offsetHeight; 287 | var left = (ww - ow) / 2 + dl; 288 | var top = (wh - oh) * 382 / 1000 + dt; // 黄金比例 289 | var style = node.style; 290 | 291 | 292 | style.left = Math.max(parseInt(left), dl) + 'px'; 293 | style.top = Math.max(parseInt(top), dt) + 'px'; 294 | }, 295 | 296 | 297 | // 指定位置 @param {HTMLElement, Event} anchor 298 | __anchor: function(anchor) { 299 | 300 | var isElem = anchor.parentNode && anchor; 301 | var node = this.node; 302 | 303 | 304 | if (this.__anchorClass) { 305 | removeClass(node, this.__anchorClass); 306 | removeClass(node, this.__name('anchor')); 307 | } 308 | 309 | 310 | // 隐藏元素不可用 311 | if (isElem && anchor.offsetLeft * anchor.offsetTop < 0) { 312 | return this.__center(); 313 | } 314 | 315 | var that = this; 316 | var options = this.options; 317 | var fixed = options.fixed; 318 | 319 | var winWidth = getWindowSize('Width'); 320 | var winHeight = getWindowSize('Height'); 321 | var docLeft = getDocumentScroll('Left'); 322 | var docTop = getDocumentScroll('Top'); 323 | 324 | 325 | var popupWidth = node.offsetWidth; 326 | var popupHeight = node.offsetHeight; 327 | var width = anchor.offsetWidth || 0; 328 | var height = anchor.offsetHeight || 0; 329 | var offset = getOffset(); 330 | var x = offset.left; 331 | var y = offset.top; 332 | var left = fixed ? x - docLeft : x; 333 | var top = fixed ? y - docTop : y; 334 | 335 | 336 | var minLeft = fixed ? 0 : docLeft; 337 | var minTop = fixed ? 0 : docTop; 338 | var maxLeft = minLeft + winWidth - popupWidth; 339 | var maxTop = minTop + winHeight - popupHeight; 340 | 341 | 342 | var css = {}; 343 | var align = options.align.split(' '); 344 | var className = this.__name(''); 345 | var reverse = { 346 | top: 'bottom', 347 | bottom: 'top', 348 | left: 'right', 349 | right: 'left' 350 | }; 351 | var name = { 352 | top: 'top', 353 | bottom: 'top', 354 | left: 'left', 355 | right: 'left' 356 | }; 357 | 358 | 359 | var temp = [{ 360 | top: top - popupHeight, 361 | bottom: top + height, 362 | left: left - popupWidth, 363 | right: left + width 364 | }, { 365 | top: top, 366 | bottom: top - popupHeight + height, 367 | left: left, 368 | right: left - popupWidth + width 369 | }]; 370 | 371 | 372 | var center = { 373 | left: left + width / 2 - popupWidth / 2, 374 | top: top + height / 2 - popupHeight / 2 375 | }; 376 | 377 | 378 | var range = { 379 | left: [minLeft, maxLeft], 380 | top: [minTop, maxTop] 381 | }; 382 | 383 | 384 | // 超出可视区域重新适应位置 385 | align.forEach(function(val, i) { 386 | 387 | // 超出右或下边界：使用左或者上边对齐 388 | if (temp[i][val] > range[name[val]][1]) { 389 | val = align[i] = reverse[val]; 390 | } 391 | 392 | // 超出左或右边界：使用右或者下边对齐 393 | if (temp[i][val] < range[name[val]][0]) { 394 | align[i] = reverse[val]; 395 | } 396 | 397 | }); 398 | 399 | 400 | // 一个参数的情况 401 | if (!align[1]) { 402 | name[align[1]] = name[align[0]] === 'left' ? 'top' : 'left'; 403 | temp[1][align[1]] = center[name[align[1]]]; 404 | } 405 | 406 | 407 | if (isElem) { 408 | // 添加 anchor 的 css 409 | className += align.join('-'); 410 | that.__anchorClass = className; 411 | addClass(node, className); 412 | addClass(node, this.__name('anchor')); 413 | } 414 | 415 | 416 | css[name[align[0]]] = parseInt(temp[0][align[0]]); 417 | css[name[align[1]]] = parseInt(temp[1][align[1]]); 418 | 419 | node.style.left = css.left + 'px'; 420 | node.style.top = css.top + 'px'; 421 | 422 | 423 | // 获取元素或 Event 对象相对于页面的位置（不支持 iframe 内的元素） 424 | function getOffset() { 425 | if (isElem) { 426 | 427 | var win = window; 428 | var docElem = document.documentElement; 429 | var box = anchor.getBoundingClientRect(); 430 | 431 | return { 432 | top: box.top + win.pageYOffset - docElem.clientTop, 433 | left: box.left + win.pageXOffset - docElem.clientLeft 434 | }; 435 | } else { 436 | return { 437 | left: anchor.pageX, 438 | top: anchor.pageY 439 | }; 440 | } 441 | } 442 | 443 | } 444 | 445 | }; 446 | 447 | 448 | /** 当前叠加高度 */ 449 | Popup.zIndex = 1024; 450 | 451 | 452 | /** 顶层浮层的实例 */ 453 | Popup.current = null; 454 | 455 | 456 | // 获取窗口大小 457 | function getWindowSize(name) { 458 | return document.documentElement['client' + name]; 459 | } 460 | 461 | 462 | // 获取页面滚动条位置 463 | function getDocumentScroll(name) { 464 | var type = { 465 | Left: 'pageXOffset', 466 | Top: 'pageYOffset' 467 | }; 468 | return window[type[name]]; 469 | } 470 | 471 | 472 | // 删除节点 473 | function removeElement(elem) { 474 | // elem.remove() 475 | elem.parentNode.removeChild(elem); 476 | } 477 | 478 | 479 | // 显示节点 480 | function showElement(elem) { 481 | elem.style.display = 'block'; 482 | } 483 | 484 | 485 | // 隐藏节点 486 | function hideElement(elem) { 487 | elem.style.display = 'none'; 488 | } 489 | 490 | 491 | // 判断是否包含制定类名 492 | function hasClass(elem, className) { 493 | // elem.contains(className) 494 | return elem.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)')); 495 | } 496 | 497 | 498 | // 添加类 499 | function addClass(elem, className) { 500 | // elem.classList.add(className) 501 | if (!hasClass(elem, className)) { 502 | elem.className += ' ' + className; 503 | } 504 | } 505 | 506 | 507 | // 删除类 508 | function removeClass(elem, className) { 509 | // elem.classList.remove(className) 510 | if (hasClass(elem, className)) { 511 | var reg = new RegExp('(\\s|^)' + className + '(\\s|$)'); 512 | elem.className = elem.className.replace(reg, ' '); 513 | } 514 | } 515 | 516 | 517 | // 添加事件 518 | function addEvent(elem, type, callback) { 519 | elem.addEventListener(type, callback, false); 520 | } 521 | 522 | 523 | // 删除事件 524 | function removeEvent(elem, type, callback) { 525 | elem.removeEventListener(type, callback); 526 | } 527 | 528 | 529 | // 获取当前焦点的元素 530 | function getActiveElement() { 531 | try { // try: ie8~9, iframe #26 532 | var activeElement = document.activeElement; 533 | var contentDocument = activeElement.contentDocument; 534 | var elem = contentDocument && contentDocument.activeElement || activeElement; 535 | return elem; 536 | } catch (e) {} 537 | } 538 | 539 | 540 | module.exports = Popup; 541 | 542 | 543 | // 更新记录： 544 | // 取消对 iframe 支持 545 | // follow > anchor 546 | // fixed 支持多次设置 547 | // 删除遮罩层 548 | // 支持传入 elem 549 | // 修复 resize 可能被重复监听的 BUG 550 | // 移除 jQuery，只支持 IE9+ 551 | // 移除事件系统 552 | // 使用配置项代替属性 553 | 554 | // TODO showModal focus 优化 555 | // TODO zIndex 优化 556 | // __anchor 函数优化 -------------------------------------------------------------------------------- /dist/angular-popups.js: -------------------------------------------------------------------------------- 1 | /*! angular-popups@0.0.2 | https://github.com/aui/angular-popups */ 2 | !function(o){function t(e){if(i[e])return i[e].exports;var n=i[e]={exports:{},id:e,loaded:!1};return o[e].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=o,t.c=i,t.p="",t(0)}([function(o,t,i){"use strict";i(19),i(16),i(17),i(18),i(10),i(7),i(8),i(9),i(12),o.exports={}},function(o,t,i){"use strict";function e(o){var t=document.createElement("popup");return document.body.appendChild(t),t.appendChild(o[0]),p(t)}var n=i(2),p=n.element,u=i(11),r=i(3),A=function(){};r.createPopup=function(o,t){return r.directive(o,function(){var o={template:t.template,restrict:"AE",transclude:!0,replace:!0,scope:{ngIf:"=",ngShow:"=",ngHide:"=",close:"&",closeAction:"@","for":"@",align:"@",fixed:"@",modal:"@",duration:"@"},controller:["$scope",function(o){this.closeAction=["esc","timeout"],this.close=function(t){o.close(),t&&o.$apply()}}],link:function(o,i,r,l){function a(o){var t=b(r["for"]);n.isUndefined(o)||(n.isObject(o)&&(t=o),o?(i.css("visibility","hidden"),setTimeout(function(){i.css("visibility","visible"),C[d(r.modal)?"showModal":"show"](t),g(o)},0)):(C.close(),g(o)))}function b(o){return document.getElementById(o)}function d(o){return"string"==typeof o}function f(o){var t=o.target,i=t.nodeName,e=/^input|textarea$/i,n=u.current===C,p=e.test(i)&&"button"!==t.type,r=o.keyCode;n&&!p&&27===r&&l.close(o)}function s(o){i[0].contains(o.target)||l.close(o)}function c(){r.duration&&(c.timer=setTimeout(function(){l.close(!0)},Number(r.duration)))}function g(o){l.closeAction.forEach(function(t){switch(t){case"esc":o?B.on("keydown",f):B.off("keydown",f);break;case"timeout":o?c():clearTimeout(c.timer);break;case"outerchick":o?B.on("ontouchend",s).on("click",s):B.off("ontouchend",s).off("click",s);break;case"click":o?i.on(t,l.close):i.off(t,l.close)}})}var C=new u({node:i[0],fixed:d(r.fixed),align:r.align,showElement:A,hideElement:A,removeElement:A}),h=e(i),B=p(document);r.closeAction&&(l.closeAction=r.closeAction.split(/\s+/)),r.ngIf&&o.$watch("ngIf",a),r.ngShow&&o.$watch("ngShow",a),r.ngHide&&o.$watch("ngHide",function(o){a(!o)}),i.one("$destroy",function(){a(!1),C.remove(),h.remove()}),(t.link||function(){}).apply(this,arguments)}};return n.extend(o.scope,t.scope),o})},o.exports=r},function(o,t){o.exports=angular},function(o,t,i){o.exports=i(2).module("angular-popups",[])},function(o,t,i){t=o.exports=i(5)(),t.push([o.id,".ui-popup{position:absolute;font-family:Helvetica,arial,sans-serif}.ui-popup:focus{outline:0}.ui-popup-show{display:block}.ui-popup-modal:before{content:'';position:fixed;left:0;right:0;top:0;bottom:0;background:#000;opacity:.7;-webkit-transform:scale(3);transform:scale(3);-webkit-animation:ui-popup-opacity .15s 1 linear;animation:ui-popup-opacity .15s 1 linear}.ui-popup-modal>*{position:relative}@-webkit-keyframes ui-popup-opacity{0%{opacity:0}to{opacity:.7}}@keyframes ui-popup-opacity{0%{opacity:0}to{opacity:.7}}","",{version:3,sources:["/./src/css/ui-popup.css"],names:[],mappings:"AACA,UACI,kBAAmB,AACnB,sCAA0C,CAC7C,AACD,gBACI,SAAW,CACd,AACD,eACI,aAAe,CAElB,AACD,uBACI,WAAY,AACZ,eAAgB,AAChB,OAAQ,AACR,QAAS,AACT,MAAO,AACP,SAAU,AACV,gBAAiB,AACjB,WAAY,AACZ,2BAA4B,AAC5B,mBAAoB,AACpB,iDAAkD,AAClD,wCAA0C,CAE7C,AACD,kBACI,iBAAmB,CACtB,AAED,oCACI,GAAI,SAAW,CAAC,AAChB,GAAM,UAAY,CAAC,CACtB,AACD,4BACI,GAAI,SAAW,CAAC,AAChB,GAAM,UAAY,CAAC,CACtB",file:"ui-popup.css",sourcesContent:["\n.ui-popup {\n position: absolute;\n font-family: Helvetica, arial, sans-serif;\n}\n.ui-popup:focus {\n outline: 0;\n}\n.ui-popup-show {\n display: block;\n\n}\n.ui-popup-modal::before {\n content: '';\n position: fixed;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background: #000;\n opacity: .7;\n -webkit-transform: scale(3);\n transform: scale(3);\n -webkit-animation: ui-popup-opacity .15s 1 linear;\n animation: ui-popup-opacity .15s 1 linear;\n\n}\n.ui-popup-modal > * {\n position: relative;\n}\n\n@-webkit-keyframes ui-popup-opacity {\n 0% {opacity: 0;}\n 100% {opacity: .7;}\n}\n@keyframes ui-popup-opacity {\n 0% {opacity: 0;}\n 100% {opacity: .7;}\n}"],sourceRoot:"webpack://"}])},function(o,t){o.exports=function(){var o=[];return o.toString=function(){for(var o=[],t=0;t=0&&B.splice(t,1)}function r(o){var t=document.createElement("style");return t.type="text/css",p(o,t),t}function A(o){var t=document.createElement("link");return t.rel="stylesheet",p(o,t),t}function l(o,t){var i,e,n;if(t.singleton){var p=h++;i=C||(C=r(t)),e=a.bind(null,i,p,!1),n=a.bind(null,i,p,!0)}else o.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(i=A(t),e=d.bind(null,i),n=function(){u(i),i.href&&URL.revokeObjectURL(i.href)}):(i=r(t),e=b.bind(null,i),n=function(){u(i)});return e(o),function(t){if(t){if(t.css===o.css&&t.media===o.media&&t.sourceMap===o.sourceMap)return;e(o=t)}else n()}}function a(o,t,i,e){var n=i?"":e.css;if(o.styleSheet)o.styleSheet.cssText=m(t,n);else{var p=document.createTextNode(n),u=o.childNodes;u[t]&&o.removeChild(u[t]),u.length?o.insertBefore(p,u[t]):o.appendChild(p)}}function b(o,t){var i=t.css,e=t.media;t.sourceMap;if(e&&o.setAttribute("media",e),o.styleSheet)o.styleSheet.cssText=i;else{for(;o.firstChild;)o.removeChild(o.firstChild);o.appendChild(document.createTextNode(i))}}function d(o,t){var i=t.css,e=(t.media,t.sourceMap);e&&(i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */");var n=new Blob([i],{type:"text/css"}),p=o.href;o.href=URL.createObjectURL(n),p&&URL.revokeObjectURL(p)}var f={},s=function(o){var t;return function(){return"undefined"==typeof t&&(t=o.apply(this,arguments)),t}},c=s(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),g=s(function(){return document.head||document.getElementsByTagName("head")[0]}),C=null,h=0,B=[];o.exports=function(o,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=c()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var i=n(o);return e(i,t),function(o){for(var p=[],u=0;u

',link:function(o,t,i,e){i.closeAction||(e.closeAction=["esc","timeout","outerchick"])}})},function(o,t,i){"use strict";function e(o,t){u.directive(o,function(){return n.extend({require:"^dialog",restrict:"AE",transclude:!0,link:function(o,t,i,e){o.$dialogId="ui-dialog"+o.$parent.$id,o.$close=e.close},replace:!0},t)})}var n=i(2),p=n.element,u=i(1),r='

',A='

',l='',a='

',b='',d='';u.createPopup("dialog",{template:'',link:function(o,t,i,e){function n(o){var t=document.createElement("div");return t.innerHTML=o,t.firstChild}function u(o,t){t&&o.appendChild(t)}var A=t[0],a=n(r);o.$dialogId="ui-dialog"+o.$id;var b=function(o){var t="dialog",i=t+"-"+o,e=t+"\\:"+o,n="["+i+"]",p="["+e+"]",u=".ui-dialog-"+o;return A.querySelector([i,e,n,p,u].join(","))},d=function(o){return a.querySelector(".ui-dialog-"+o)},f=i.close?n(l):null,s=b("title"),c=b("content"),g=b("statusbar"),C=b("buttons"),h=d("header"),B=d("body"),m=d("footer");u(h,f),u(h,s),u(B,c),u(m,g),u(m,C),s||p(h).remove(),g||C||p(m).remove(),f&&f.addEventListener("click",e.close,!1),u(A,a)}}),e("dialogTitle",{template:A}),e("dialogContent",{template:a}),e("dialogStatusbar",{template:b}),e("dialogButtons",{template:d})},function(o,t,i){"use strict";var e=i(1);e.createPopup("notice",{template:''})},function(o,t,i){"use strict";var e=i(1);e.createPopup("popup",{template:''})},function(o,t){"use strict";function i(o){this.options=Object.create(i.defaults),Object.keys(o||{}).forEach(function(t){var i=o[t];"undefined"!=typeof i&&(this.options[t]=i)},this);var t=this.options.node||document.createElement("div");t.style.position="absolute",t.setAttribute("tabindex","-1"),document.body.appendChild(t),this.options.hideElement(t),this.node=t,this.destroyed=!1}function e(o){return document.documentElement["client"+o]}function n(o){var t={Left:"pageXOffset",Top:"pageYOffset"};return window[t[o]]}function p(o){o.parentNode.removeChild(o)}function u(o){o.style.display="block"}function r(o){o.style.display="none"}function A(o,t){return o.className.match(new RegExp("(\\s|^)"+t+"(\\s|$)"))}function l(o,t){A(o,t)||(o.className+=" "+t)}function a(o,t){if(A(o,t)){var i=new RegExp("(\\s|^)"+t+"(\\s|$)");o.className=o.className.replace(i," ")}}function b(o,t,i){o.addEventListener(t,i,!1)}function d(o,t,i){o.removeEventListener(t,i)}function f(){try{var o=document.activeElement,t=o.contentDocument,i=t&&t.activeElement||o;return i}catch(e){}}i.defaults={node:null,fixed:!1,autofocus:!0,align:"bottom left",className:"ui-popup",showElement:u,hideElement:r,removeElement:p},i.prototype={constructor:i,destroyed:!0,open:!1,returnValue:"",show:function(o){if(this.destroyed)return this;var t=this.node;return this.__activeElement=f(),this.open=!0,this.anchor=o,l(t,this.options.className),l(t,this.__name("show")),t.setAttribute("role",this.modal?"alertdialog":"dialog"),this.__show||(this.focus=this.focus.bind(this),this.reset=this.reset.bind(this),this.__show=!0),this.modal&&(l(t,this.__name("modal")),b(document,"focusin",this.focus)),this.options.showElement(t),b(window,"resize",this.reset),this.reset().focus(),this},showModal:function(){return this.modal=!0,this.show.apply(this,arguments)},close:function(o){if(!this.destroyed&&this.open){var t=this.node;void 0!==o&&(this.returnValue=o),a(t,this.__name("show")),a(t,this.__name("modal")),this.options.hideElement(t),this.open=!1,this.blur(),d(document,"focusin",this.focus),d(window,"resize",this.reset)}return this},remove:function(){if(this.destroyed)return this;this.open&&this.close(),i.current===this&&(i.current=null),this.options.removeElement(this.node);for(var o in this)delete this[o];return this},reset:function(){if(this.open){var o=this.anchor;return"string"==typeof o&&(o=this.anchor=document.querySelector(o)),this.node.style.position=this.options.fixed?"fixed":"absolute",o?this.__anchor(o):this.__center(),this}},focus:function(){var o=this.node,t=i.current,e=this.zIndex=i.zIndex++;if(t&&t!==this&&t.blur(!1),!o.contains(f())){var n=o.querySelector("[autofocus]");!this.__autofocus&&n?this.__autofocus=!0:n=o,this.__focus(n)}return o.style.zIndex=e,i.current=this,l(o,this.__name("focus")),this},blur:function(){var o=this.__activeElement,t=f(),i=arguments[0],e=this.node;return i!==!1&&e.contains(t)&&this.__focus(o),this.__autofocus=!1,a(e,this.__name("focus")),this},__name:function(o){return this.options.className+"-"+o},__focus:function(o){try{this.options.autofocus&&!/^iframe$/i.test(o.nodeName)&&o.focus()}catch(t){}},__center:function(){var o=this.node,t=this.options.fixed,i=t?0:n("Left"),p=t?0:n("Top"),u=e("Width"),r=e("Height"),A=o.offsetWidth,l=o.offsetHeight,a=(u-A)/2+i,b=382*(r-l)/1e3+p,d=o.style;d.left=Math.max(parseInt(a),i)+"px",d.top=Math.max(parseInt(b),p)+"px"},__anchor:function(o){function t(){if(i){var t=window,e=document.documentElement,n=o.getBoundingClientRect();return{top:n.top+t.pageYOffset-e.clientTop,left:n.left+t.pageXOffset-e.clientLeft}}return{left:o.pageX,top:o.pageY}}var i=o.parentNode&&o,p=this.node;if(this.__anchorClass&&(a(p,this.__anchorClass),a(p,this.__name("anchor"))),i&&o.offsetLeft*o.offsetTop<0)return this.__center();var u=this,r=this.options,A=r.fixed,b=e("Width"),d=e("Height"),f=n("Left"),s=n("Top"),c=p.offsetWidth,g=p.offsetHeight,C=o.offsetWidth||0,h=o.offsetHeight||0,B=t(),m=B.left,x=B.top,v=A?m-f:m,w=A?x-s:x,k=A?0:f,y=A?0:s,D=k+b-c,E=y+d-g,I={},$=r.align.split(" "),W=this.__name(""),U={top:"bottom",bottom:"top",left:"right",right:"left"},_={top:"top",bottom:"top",left:"left",right:"left"},S=[{top:w-g,bottom:w+h,left:v-c,right:v+C},{top:w,bottom:w-g+h,left:v,right:v-c+C}],G={left:v+C/2-c/2,top:w+h/2-g/2},Y={left:[k,D],top:[y,E]};$.forEach(function(o,t){S[t][o]>Y[_[o]][1]&&(o=$[t]=U[o]),S[t][o]

',l='{{$$Popup.content}}';n.extend(this,p),this.$get=["$compile","$rootScope",function(p,a){function b(i){if(!t){var b=e(A);document.body.appendChild(b),p(b)(a);var d=e(l);document.body.appendChild(d),p(d)(a),t=!0}var f=Object.create(u);return f=n.extend(f,o,i),f.$destroy=function(){delete a.$$Popup},a.$$Popup=f,r}return{alert:function(o,t){return b({content:o,ok:t||i})},confirm:function(o,t,e){return b({content:o,ok:t||i,cancel:e||i})},notice:function(o,t,e){return b({content:o,duration:t||2e3,ok:e||i,notice:!0})}}}]})},function(o,t,i){t=o.exports=i(5)(),t.i(i(4),""),t.push([o.id,"body,html{-webkit-tap-highlight-color:rgba(255,255,255,0)}.ui-bubble{position:relative;background:hsla(50,89%,93%,.9);border:1px solid rgba(206,157,72,.7);border-radius:3px;outline:0;background-clip:padding-box;line-height:1.428571429;color:#cd9c4f}.ui-popup-focus .ui-bubble{box-shadow:0 0 5px rgba(0,0,0,.1)}.ui-bubble-content{padding:5px}.ui-popup-top-left .ui-bubble,.ui-popup-top-right .ui-bubble,.ui-popup-top .ui-bubble{top:-5px}.ui-popup-bottom-left .ui-bubble,.ui-popup-bottom-right .ui-bubble,.ui-popup-bottom .ui-bubble{top:5px}.ui-popup-left-bottom .ui-bubble,.ui-popup-left-top .ui-bubble,.ui-popup-left .ui-bubble{left:-5px}.ui-popup-right-bottom .ui-bubble,.ui-popup-right-top .ui-bubble,.ui-popup-right .ui-bubble{left:5px}.ui-bubble:after,.ui-bubble:before{content:'';position:absolute;display:none;width:0;height:0;overflow:hidden;border:5px dashed transparent}.ui-popup-anchor .ui-bubble:after,.ui-popup-anchor .ui-bubble:before{display:block}.ui-popup-top-left .ui-bubble:before,.ui-popup-top-right .ui-bubble:before,.ui-popup-top .ui-bubble:before{bottom:-10px;border-top:5px solid #cd9c4f}.ui-popup-top-left .ui-bubble:after,.ui-popup-top-right .ui-bubble:after,.ui-popup-top .ui-bubble:after{bottom:-9px;border-top:5px solid #fdf8df}.ui-popup-top-left .ui-bubble:after,.ui-popup-top-left .ui-bubble:before{left:9px}.ui-popup-top .ui-bubble:after,.ui-popup-top .ui-bubble:before{left:50%;margin-left:-5px}.ui-popup-top-right .ui-bubble:after,.ui-popup-top-right .ui-bubble:before{right:9px}.ui-popup-bottom-left .ui-bubble:before,.ui-popup-bottom-right .ui-bubble:before,.ui-popup-bottom .ui-bubble:before{top:-10px;border-bottom:5px solid #cd9c4f}.ui-popup-bottom-left .ui-bubble:after,.ui-popup-bottom-right .ui-bubble:after,.ui-popup-bottom .ui-bubble:after{top:-9px;border-bottom:5px solid #fdf8df}.ui-popup-bottom-left .ui-bubble:after,.ui-popup-bottom-left .ui-bubble:before{left:9px}.ui-popup-bottom .ui-bubble:after,.ui-popup-bottom .ui-bubble:before{margin-left:-5px;left:50%}.ui-popup-bottom-right .ui-bubble:after,.ui-popup-bottom-right .ui-bubble:before{right:9px}.ui-popup-left-bottom .ui-bubble:before,.ui-popup-left-top .ui-bubble:before,.ui-popup-left .ui-bubble:before{right:-10px;border-left:5px solid #cd9c4f}.ui-popup-left-bottom .ui-bubble:after,.ui-popup-left-top .ui-bubble:after,.ui-popup-left .ui-bubble:after{right:-9px;border-left:5px solid #fdf8df}.ui-popup-left-top .ui-bubble:after,.ui-popup-left-top .ui-bubble:before{top:9px}.ui-popup-left .ui-bubble:after,.ui-popup-left .ui-bubble:before{margin-top:-5px;top:50%}.ui-popup-left-bottom .ui-bubble:after,.ui-popup-left-bottom .ui-bubble:before{bottom:9px}.ui-popup-right-bottom .ui-bubble:before,.ui-popup-right-top .ui-bubble:before,.ui-popup-right .ui-bubble:before{left:-10px;border-right:5px solid #cd9c4f}.ui-popup-right-bottom .ui-bubble:after,.ui-popup-right-top .ui-bubble:after,.ui-popup-right .ui-bubble:after{left:-9px;border-right:5px solid #fdf8df}.ui-popup-right-top .ui-bubble:after,.ui-popup-right-top .ui-bubble:before{top:9px}.ui-popup-right .ui-bubble:after,.ui-popup-right .ui-bubble:before{margin-top:-5px;top:50%}.ui-popup-right-bottom .ui-bubble:after,.ui-popup-right-bottom .ui-bubble:before{bottom:9px}","",{version:3,sources:["/./src/css/ui-bubble.css"],names:[],mappings:"AACA,UACI,+CAAgD,CACnD,AACD,WACI,kBAAmB,AACnB,+BAAoC,AACpC,qCAAyC,AACzC,kBAAmB,AACnB,UAAW,AACX,4BAA6B,AAC7B,wBAAyB,AACzB,aAAe,CAElB,AACD,2BACI,iCAAuC,CAC1C,AACD,mBACI,WAAa,CAChB,AAED,sFAGI,QAAU,CACb,AACD,+FAGI,OAAS,CACZ,AACD,yFAGI,SAAW,CACd,AACD,4FAGI,QAAU,CACb,AACD,mCAEI,WAAY,AACZ,kBAAmB,AACnB,aAAc,AACd,QAAS,AACT,SAAU,AACV,gBAAgB,AAChB,6BAA8B,CACjC,AACD,qEAEI,aAAe,CAClB,AACD,2GAGI,aAAc,AACd,4BAA6B,CAChC,AACD,wGAGI,YAAa,AACb,4BAA6B,CAChC,AACD,yEAEI,QAAU,CACb,AACD,+DAEI,SAAU,AACV,gBAAkB,CACrB,AACD,2EAEI,SAAW,CACd,AACD,oHAGI,UAAW,AACX,+BAAgC,CACnC,AACD,iHAGI,SAAU,AACV,+BAAgC,CACnC,AACD,+EAEI,QAAU,CACb,AACD,qEAEI,iBAAkB,AAClB,QAAU,CACb,AACD,iFAEI,SAAW,CACd,AACD,8GAGI,YAAa,AACb,6BAA8B,CACjC,AACD,2GAGI,WAAY,AACZ,6BAA8B,CACjC,AACD,yEAEI,OAAS,CACZ,AACD,iEAEI,gBAAiB,AACjB,OAAS,CACZ,AACD,+EAEI,UAAY,CACf,AACD,iHAGI,WAAY,AACZ,8BAA+B,CAClC,AACD,8GAGI,UAAW,AACX,8BAA+B,CAClC,AACD,2EAEI,OAAS,CACZ,AACD,mEAEI,gBAAiB,AACjB,OAAS,CACZ,AACD,iFAEI,UAAY,CACf",file:"ui-bubble.css",sourcesContent:["@import url('./ui-popup.css');\nhtml, body {\n -webkit-tap-highlight-color:rgba(255,255,255,0);\n}\n.ui-bubble {\n position: relative;\n background: rgba(253, 248, 222, .9);\n border: 1px solid rgba(206, 157, 72, .7);\n border-radius: 3px;\n outline: 0;\n background-clip: padding-box;\n line-height: 1.428571429;\n color: #CD9C4F;\n /*-webkit-backdrop-filter: saturate(180%) blur(20px);*/\n}\n.ui-popup-focus .ui-bubble {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.ui-bubble-content {\n padding: 5px;\n}\n\n.ui-popup-top-left .ui-bubble,\n.ui-popup-top .ui-bubble,\n.ui-popup-top-right .ui-bubble {\n top: -5px;\n}\n.ui-popup-bottom-left .ui-bubble,\n.ui-popup-bottom .ui-bubble,\n.ui-popup-bottom-right .ui-bubble {\n top: 5px;\n}\n.ui-popup-left-top .ui-bubble,\n.ui-popup-left .ui-bubble,\n.ui-popup-left-bottom .ui-bubble {\n left: -5px;\n}\n.ui-popup-right-top .ui-bubble,\n.ui-popup-right .ui-bubble,\n.ui-popup-right-bottom .ui-bubble {\n left: 5px;\n}\n.ui-bubble::before,\n.ui-bubble::after {\n content: '';\n position: absolute;\n display: none;\n width: 0;\n height: 0;\n overflow:hidden;\n border:5px dashed transparent;\n}\n.ui-popup-anchor .ui-bubble::before,\n.ui-popup-anchor .ui-bubble::after{\n display: block;\n}\n.ui-popup-top-left .ui-bubble::before,\n.ui-popup-top .ui-bubble::before,\n.ui-popup-top-right .ui-bubble::before {\n bottom: -10px;\n border-top:5px solid #CD9C4F;\n}\n.ui-popup-top-left .ui-bubble::after,\n.ui-popup-top .ui-bubble::after,\n.ui-popup-top-right .ui-bubble::after {\n bottom: -9px;\n border-top:5px solid #FDF8DF;\n}\n.ui-popup-top-left .ui-bubble::before,\n.ui-popup-top-left .ui-bubble::after {\n left: 9px;\n}\n.ui-popup-top .ui-bubble::before,\n.ui-popup-top .ui-bubble::after {\n left: 50%;\n margin-left: -5px;\n}\n.ui-popup-top-right .ui-bubble::before,\n.ui-popup-top-right .ui-bubble::after {\n right: 9px;\n}\n.ui-popup-bottom-left .ui-bubble::before,\n.ui-popup-bottom .ui-bubble::before,\n.ui-popup-bottom-right .ui-bubble::before {\n top: -10px;\n border-bottom:5px solid #CD9C4F;\n}\n.ui-popup-bottom-left .ui-bubble::after,\n.ui-popup-bottom .ui-bubble::after,\n.ui-popup-bottom-right .ui-bubble::after {\n top: -9px;\n border-bottom:5px solid #FDF8DF;\n}\n.ui-popup-bottom-left .ui-bubble::before,\n.ui-popup-bottom-left .ui-bubble::after {\n left: 9px;\n}\n.ui-popup-bottom .ui-bubble::before,\n.ui-popup-bottom .ui-bubble::after {\n margin-left: -5px;\n left: 50%;\n}\n.ui-popup-bottom-right .ui-bubble::before,\n.ui-popup-bottom-right .ui-bubble::after {\n right: 9px;\n}\n.ui-popup-left-top .ui-bubble::before,\n.ui-popup-left .ui-bubble::before,\n.ui-popup-left-bottom .ui-bubble::before {\n right: -10px;\n border-left:5px solid #CD9C4F;\n}\n.ui-popup-left-top .ui-bubble::after,\n.ui-popup-left .ui-bubble::after,\n.ui-popup-left-bottom .ui-bubble::after {\n right: -9px;\n border-left:5px solid #FDF8DF;\n}\n.ui-popup-left-top .ui-bubble::before,\n.ui-popup-left-top .ui-bubble::after {\n top: 9px;\n}\n.ui-popup-left .ui-bubble::before,\n.ui-popup-left .ui-bubble::after {\n margin-top: -5px;\n top: 50%;\n}\n.ui-popup-left-bottom .ui-bubble::before,\n.ui-popup-left-bottom .ui-bubble::after {\n bottom: 9px;\n}\n.ui-popup-right-top .ui-bubble::before,\n.ui-popup-right .ui-bubble::before,\n.ui-popup-right-bottom .ui-bubble::before {\n left: -10px;\n border-right:5px solid #CD9C4F;\n}\n.ui-popup-right-top .ui-bubble::after,\n.ui-popup-right .ui-bubble::after,\n.ui-popup-right-bottom .ui-bubble::after {\n left: -9px;\n border-right:5px solid #FDF8DF;\n}\n.ui-popup-right-top .ui-bubble::before,\n.ui-popup-right-top .ui-bubble::after {\n top: 9px;\n}\n.ui-popup-right .ui-bubble::before,\n.ui-popup-right .ui-bubble::after {\n margin-top: -5px;\n top: 50%;\n}\n.ui-popup-right-bottom .ui-bubble::before,\n.ui-popup-right-bottom .ui-bubble::after {\n bottom: 9px;\n}"],sourceRoot:"webpack://"}])},function(o,t,i){t=o.exports=i(5)(),t.i(i(4),""),t.push([o.id,".ui-dialog{position:relative;background-color:#fff;border:1px solid rgba(0,0,0,.3);border-radius:6px;outline:0;background-clip:padding-box;font-size:14px;line-height:1.428571429;text-align:left;color:#333}@media (max-width:768px){.ui-dialog{width:90vw}}.ui-popup-focus .ui-dialog{box-shadow:0 0 8px rgba(0,0,0,.1)}.ui-popup-modal .ui-dialog{box-shadow:none}.ui-dialog-header{white-space:nowrap}.ui-dialog-header:after{content:'';display:block;height:0;border-bottom:1px solid #e5e5e5}.ui-dialog-close{position:relative;float:right;top:13px;right:13px;margin-top:-1px;padding:0;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;-webkit-tap-highlight-color:rgba(255,255,255,0)}.ui-dialog-close:active,.ui-dialog-close:focus,.ui-dialog-close:hover{color:#000;text-decoration:none;cursor:pointer;outline:0;opacity:.5}.ui-dialog-title{margin:0;line-height:1.428571429;min-height:16.428571429px;padding:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700;cursor:default}.ui-dialog-body{padding:20px;text-align:center}.ui-dialog-content{display:inline-block;position:relative;vertical-align:middle;text-align:left}.ui-dialog-footer{padding:0 20px 20px;text-align:center}.ui-dialog-footer:after{content:'';display:block;clear:both;height:0;overflow:hidden}.ui-dialog-statusbar{float:left;margin-right:20px;padding:6px 0;line-height:1.428571429;font-size:14px;color:#888;white-space:nowrap}.ui-dialog-statusbar label:hover{color:#333}.ui-dialog-statusbar .label,.ui-dialog-statusbar input{vertical-align:middle}.ui-dialog-buttons{float:right;white-space:nowrap}.ui-dialog-footer button+button{margin-bottom:0;margin-left:5px}.ui-dialog-footer button{width:auto;overflow:visible;display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.428571429;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.ui-dialog-footer button:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.ui-dialog-footer button:focus,.ui-dialog-footer button:hover{color:#333;text-decoration:none}.ui-dialog-footer button:active{background-image:none;outline:0;box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.ui-dialog-footer button:disabled{pointer-events:none;cursor:not-allowed;opacity:.65;box-shadow:none}.ui-dialog-footer button{color:#333;background-color:#fff;border-color:#ccc}.ui-dialog-footer button:active,.ui-dialog-footer button:focus,.ui-dialog-footer button:hover{color:#333;background-color:#ebebeb;border-color:#adadad}.ui-dialog-footer button:active{background-image:none}.ui-dialog-footer button:disabled,.ui-dialog-footer button:disabled:active,.ui-dialog-footer button:disabled:focus,.ui-dialog-footer button:disabled:hover{background-color:#fff;border-color:#ccc}.ui-dialog-footer button[autofocus]{color:#fff;background-color:#428bca;border-color:#357ebd}.ui-dialog-footer button[autofocus]:active,.ui-dialog-footer button[autofocus]:focus,.ui-dialog-footer button[autofocus]:hover{color:#fff;background-color:#3276b1;border-color:#285e8e}.ui-dialog-footer button[autofocus]:active{background-image:none}.ui-popup-top-left .ui-dialog,.ui-popup-top-right .ui-dialog,.ui-popup-top .ui-dialog{top:-8px}.ui-popup-bottom-left .ui-dialog,.ui-popup-bottom-right .ui-dialog,.ui-popup-bottom .ui-dialog{top:8px}.ui-popup-left-bottom .ui-dialog,.ui-popup-left-top .ui-dialog,.ui-popup-left .ui-dialog{left:-8px}.ui-popup-right-bottom .ui-dialog,.ui-popup-right-top .ui-dialog,.ui-popup-right .ui-dialog{left:8px}.ui-dialog:after,.ui-dialog:before{content:'';position:absolute;display:none;width:0;height:0;overflow:hidden;border:8px dashed transparent}.ui-popup-anchor .ui-dialog:after,.ui-popup-anchor .ui-dialog:before{display:block}.ui-popup-top-left .ui-dialog:before,.ui-popup-top-right .ui-dialog:before,.ui-popup-top .ui-dialog:before{bottom:-16px;border-top:8px solid #7c7c7c}.ui-popup-top-left .ui-dialog:after,.ui-popup-top-right .ui-dialog:after,.ui-popup-top .ui-dialog:after{bottom:-15px;border-top:8px solid #fff}.ui-popup-top-left .ui-dialog:after,.ui-popup-top-left .ui-dialog:before{left:15px}.ui-popup-top .ui-dialog:after,.ui-popup-top .ui-dialog:before{left:50%;margin-left:-8px}.ui-popup-top-right .ui-dialog:after,.ui-popup-top-right .ui-dialog:before{right:15px}.ui-popup-bottom-left .ui-dialog:before,.ui-popup-bottom-right .ui-dialog:before,.ui-popup-bottom .ui-dialog:before{top:-16px;border-bottom:8px solid #7c7c7c}.ui-popup-bottom-left .ui-dialog:after,.ui-popup-bottom-right .ui-dialog:after,.ui-popup-bottom .ui-dialog:after{top:-15px;border-bottom:8px solid #fff}.ui-popup-bottom-left .ui-dialog:after,.ui-popup-bottom-left .ui-dialog:before{left:15px}.ui-popup-bottom .ui-dialog:after,.ui-popup-bottom .ui-dialog:before{margin-left:-8px;left:50%}.ui-popup-bottom-right .ui-dialog:after,.ui-popup-bottom-right .ui-dialog:before{right:15px}.ui-popup-left-bottom .ui-dialog:before,.ui-popup-left-top .ui-dialog:before,.ui-popup-left .ui-dialog:before{right:-16px;border-left:8px solid #7c7c7c}.ui-popup-left-bottom .ui-dialog:after,.ui-popup-left-top .ui-dialog:after,.ui-popup-left .ui-dialog:after{right:-15px;border-left:8px solid #fff}.ui-popup-left-top .ui-dialog:after,.ui-popup-left-top .ui-dialog:before{top:15px}.ui-popup-left .ui-dialog:after,.ui-popup-left .ui-dialog:before{margin-top:-8px;top:50%}.ui-popup-left-bottom .ui-dialog:after,.ui-popup-left-bottom .ui-dialog:before{bottom:15px}.ui-popup-right-bottom .ui-dialog:before,.ui-popup-right-top .ui-dialog:before,.ui-popup-right .ui-dialog:before{left:-16px;border-right:8px solid #7c7c7c}.ui-popup-right-bottom .ui-dialog:after,.ui-popup-right-top .ui-dialog:after,.ui-popup-right .ui-dialog:after{left:-15px;border-right:8px solid #fff}.ui-popup-right-top .ui-dialog:after,.ui-popup-right-top .ui-dialog:before{top:15px}.ui-popup-right .ui-dialog:after,.ui-popup-right .ui-dialog:before{margin-top:-8px;top:50%}.ui-popup-right-bottom .ui-dialog:after,.ui-popup-right-bottom .ui-dialog:before{bottom:15px}.ui-dialog-loading{vertical-align:middle;display:inline-block;overflow:hidden;width:32px;height:32px;font-size:0;text-indent:-999em;color:#666;width:100%\\9;text-indent:0;line-height:32px\\9;text-align:center\\9;font-size:12px\\9}.ui-dialog-loading:after{position:absolute;content:'';width:3px;height:3px;margin:14.5px 0 0 14.5px;border-radius:100%;box-shadow:0 -10px 0 1px #ccc,10px 0 #ccc,0 10px #ccc,-10px 0 #ccc,-7px -7px 0 .5px #ccc,7px -7px 0 1.5px #ccc,7px 7px #ccc,-7px 7px #ccc;-webkit-transform:rotate(1turn);-webkit-animation:ui-dialog-loading 1.5s infinite linear;transform:rotate(1turn);animation:ui-dialog-loading 1.5s infinite linear;display:none\\9}@-webkit-keyframes ui-dialog-loading{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(1turn)}}@keyframes ui-dialog-loading{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}","",{version:3,sources:["/./src/css/ui-dialog.css"],names:[],mappings:"AACA,WACI,kBAAmB,AACnB,sBAAuB,AACvB,gCAAoC,AACpC,kBAAmB,AACnB,UAAW,AACX,4BAA6B,AAC7B,eAAgB,AAChB,wBAAyB,AACzB,gBAAiB,AACjB,UAAY,CACf,AACD,yBACI,WACI,UAAY,CACf,CACJ,AACD,2BACI,iCAAuC,CAC1C,AACD,2BACI,eAAiB,CACpB,AACD,kBACI,kBAAoB,CACvB,AACD,wBACI,WAAY,AACZ,cAAe,AACf,SAAU,AACV,+BAAiC,CACpC,AACD,iBACI,kBAAmB,AACnB,YAAa,AACb,SAAU,AACV,WAAY,AACZ,gBAAiB,AACjB,UAAW,AACX,eAAgB,AAChB,gBAAkB,AAClB,cAAe,AACf,WAAY,AACZ,yBAA0B,AAC1B,WAAY,AACZ,eAAgB,AAChB,uBAAwB,AACxB,SAAU,AACV,wBAAyB,AACzB,+CAAgD,CACnD,AACD,sEAGI,WAAY,AACZ,qBAAsB,AACtB,eAAgB,AAChB,UAAW,AACX,UAAa,CAChB,AACD,iBACI,SAAU,AACV,wBAAyB,AACzB,0BAA2B,AAC3B,aAAc,AACd,gBAAgB,AAChB,mBAAoB,AACpB,uBAAwB,AACxB,gBAAkB,AAClB,cAAgB,CACnB,AACD,gBACI,aAAc,AACd,iBAAmB,CACtB,AACD,mBACI,qBAAsB,AACtB,kBAAmB,AACnB,sBAAuB,AACvB,eAAiB,CACpB,AACD,kBACI,oBAA0B,AAC1B,iBAAmB,CACtB,AACD,wBACI,WAAY,AACZ,cAAe,AACf,WAAY,AACZ,SAAU,AACV,eAAiB,CACpB,AACD,qBACI,WAAY,AACZ,kBAAmB,AACnB,cAAe,AACf,wBAAyB,AACzB,eAAgB,AAChB,WAAY,AACZ,kBAAoB,CACvB,AACD,iCACI,UAAY,CACf,AACD,uDAEI,qBAAuB,CAC1B,AACD,mBACI,YAAa,AACb,kBAAoB,CACvB,AACD,gCACI,gBAAiB,AACjB,eAAiB,CACpB,AACD,yBACI,WAAW,AACX,iBAAiB,AACjB,qBAAsB,AACtB,iBAAkB,AAClB,gBAAiB,AACjB,eAAgB,AAChB,gBAAoB,AACpB,wBAAyB,AACzB,kBAAmB,AACnB,mBAAoB,AACpB,sBAAuB,AACvB,eAAgB,AAChB,sBAAuB,AACvB,6BAA8B,AAC9B,kBAAmB,AACnB,yBAA0B,AACzB,sBAAuB,AACtB,qBAAsB,AACrB,oBAAqB,AAClB,gBAAkB,CAC3B,AAED,+BACE,yBAA0B,AAC1B,0CAA2C,AAC3C,mBAAqB,CACtB,AAED,8DAEE,WAAe,AACf,oBAAsB,CACvB,AAED,gCACE,sBAAuB,AACvB,UAAW,AAEH,2CAAiD,CAC1D,AACD,kCACE,oBAAqB,AACrB,mBAAoB,AACpB,YAAc,AAEN,eAAiB,CAC1B,AAED,yBACE,WAAe,AACf,sBAA0B,AAC1B,iBAAsB,CACvB,AAED,8FAGE,WAAe,AACf,yBAA0B,AAC1B,oBAAsB,CACvB,AAED,gCACE,qBAAuB,CACxB,AAED,2JAIE,sBAA0B,AAC1B,iBAAsB,CACvB,AAED,oCACE,WAAe,AACf,yBAA0B,AAC1B,oBAAsB,CACvB,AAED,+HAGE,WAAe,AACf,yBAA0B,AAC1B,oBAAsB,CACvB,AAED,2CACE,qBAAuB,CACxB,AACD,sFAGI,QAAU,CACb,AACD,+FAGI,OAAS,CACZ,AACD,yFAGI,SAAW,CACd,AACD,4FAGI,QAAU,CACb,AAED,mCAEI,WAAY,AACZ,kBAAmB,AACnB,aAAc,AACd,QAAS,AACT,SAAU,AACV,gBAAgB,AAChB,6BAA8B,CACjC,AACD,qEAEI,aAAe,CAClB,AACD,2GAGI,aAAc,AACd,4BAA6B,CAChC,AACD,wGAGI,aAAc,AACd,yBAA0B,CAC7B,AACD,yEAEI,SAAW,CACd,AACD,+DAEI,SAAU,AACV,gBAAkB,CACrB,AACD,2EAEI,UAAY,CACf,AACD,oHAGI,UAAW,AACX,+BAAgC,CACnC,AACD,iHAGI,UAAW,AACX,4BAA6B,CAChC,AACD,+EAEI,SAAW,CACd,AACD,qEAEI,iBAAkB,AAClB,QAAU,CACb,AACD,iFAEI,UAAY,CACf,AACD,8GAGI,YAAa,AACb,6BAA8B,CACjC,AACD,2GAGI,YAAa,AACb,0BAA2B,CAC9B,AACD,yEAEI,QAAU,CACb,AACD,iEAEI,gBAAiB,AACjB,OAAS,CACZ,AACD,+EAEI,WAAa,CAChB,AACD,iHAGI,WAAY,AACZ,8BAA+B,CAClC,AACD,8GAGI,WAAY,AACZ,2BAA4B,CAC/B,AACD,2EAEI,QAAU,CACb,AACD,mEAEI,gBAAiB,AACjB,OAAS,CACZ,AACD,iFAEI,WAAa,CAChB,AAED,mBACI,sBAAuB,AACvB,qBAAsB,AACtB,gBAAiB,AACjB,WAAY,AACZ,YAAa,AACb,YAAa,AACb,mBAAoB,AACpB,WAAY,AAGZ,aAAc,AACd,cAAiB,AACjB,mBAAoB,AACpB,oBAAqB,AACrB,gBAAkB,CANrB,AASD,yBACI,kBAAmB,AACnB,WAAY,AACZ,UAAW,AACX,WAAY,AACZ,yBAA0B,AAC1B,mBAAoB,AACpB,0IAAqJ,AACrJ,gCAAkC,AAClC,yDAA0D,AAC1D,wBAA0B,AAC1B,iDAAkD,AAClD,cAAgB,CACnB,AAED,qCACI,GAAI,8BAAgC,CAAC,AACrC,GAAM,+BAAkC,CAAC,CAC5C,AACD,6BACI,GAAI,sBAAwB,CAAC,AAC7B,GAAM,uBAA0B,CAAC,CACpC", 3 | file:"ui-dialog.css",sourcesContent:["@import url('./ui-popup.css');\n.ui-dialog {\n position: relative;\n background-color: #FFF;\n border: 1px solid rgba(0, 0, 0, .3);\n border-radius: 6px;\n outline: 0;\n background-clip: padding-box;\n font-size: 14px;\n line-height: 1.428571429;\n text-align: left;\n color: #333;\n}\n@media (max-width: 768px) {\n .ui-dialog {\n width: 90vw;\n }\n}\n.ui-popup-focus .ui-dialog {\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n}\n.ui-popup-modal .ui-dialog {\n box-shadow: none;\n}\n.ui-dialog-header {\n white-space: nowrap;\n}\n.ui-dialog-header::after {\n content: '';\n display: block;\n height: 0;\n border-bottom: 1px solid #E5E5E5;\n}\n.ui-dialog-close {\n position: relative;\n float: right;\n top: 13px;\n right: 13px;\n margin-top: -1px;\n padding: 0;\n font-size: 21px;\n font-weight: bold;\n line-height: 1;\n color: #000;\n text-shadow: 0 1px 0 #FFF;\n opacity: .2;\n cursor: pointer;\n background: transparent;\n border: 0;\n -webkit-appearance: none;\n -webkit-tap-highlight-color:rgba(255,255,255,0);\n}\n.ui-dialog-close:hover,\n.ui-dialog-close:focus,\n.ui-dialog-close:active {\n color: #000;\n text-decoration: none;\n cursor: pointer;\n outline: 0;\n opacity: 0.5;\n}\n.ui-dialog-title {\n margin: 0;\n line-height: 1.428571429;\n min-height: 16.428571429px;\n padding: 15px;\n overflow:hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: bold;\n cursor: default;\n}\n.ui-dialog-body {\n padding: 20px;\n text-align: center;\n}\n.ui-dialog-content {\n display: inline-block;\n position: relative;\n vertical-align: middle;\n text-align: left;\n}\n.ui-dialog-footer {\n padding: 0 20px 20px 20px;\n text-align: center;\n}\n.ui-dialog-footer::after {\n content: '';\n display: block;\n clear: both;\n height: 0;\n overflow: hidden;\n}\n.ui-dialog-statusbar {\n float: left;\n margin-right: 20px;\n padding: 6px 0;\n line-height: 1.428571429;\n font-size: 14px;\n color: #888;\n white-space: nowrap;\n}\n.ui-dialog-statusbar label:hover {\n color: #333;\n}\n.ui-dialog-statusbar input,\n.ui-dialog-statusbar .label {\n vertical-align: middle;\n}\n.ui-dialog-buttons {\n float: right;\n white-space: nowrap;\n}\n.ui-dialog-footer button+button {\n margin-bottom: 0;\n margin-left: 5px;\n}\n.ui-dialog-footer button {\n width:auto;\n overflow:visible;\n display: inline-block;\n padding: 6px 12px;\n margin-bottom: 0;\n font-size: 14px;\n font-weight: normal;\n line-height: 1.428571429;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n cursor: pointer;\n background-image: none;\n border: 1px solid transparent;\n border-radius: 4px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n -o-user-select: none;\n user-select: none;\n}\n\n.ui-dialog-footer button:focus {\n outline: thin dotted #333;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: -2px;\n}\n\n.ui-dialog-footer button:hover,\n.ui-dialog-footer button:focus {\n color: #333333;\n text-decoration: none;\n}\n\n.ui-dialog-footer button:active {\n background-image: none;\n outline: 0;\n -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n}\n.ui-dialog-footer button:disabled {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.65;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n\n.ui-dialog-footer button {\n color: #333333;\n background-color: #ffffff;\n border-color: #cccccc;\n}\n\n.ui-dialog-footer button:hover,\n.ui-dialog-footer button:focus,\n.ui-dialog-footer button:active {\n color: #333333;\n background-color: #ebebeb;\n border-color: #adadad;\n}\n\n.ui-dialog-footer button:active{\n background-image: none;\n}\n\n.ui-dialog-footer button:disabled,\n.ui-dialog-footer button:disabled:hover,\n.ui-dialog-footer button:disabled:focus,\n.ui-dialog-footer button:disabled:active {\n background-color: #ffffff;\n border-color: #cccccc;\n}\n\n.ui-dialog-footer button[autofocus] {\n color: #ffffff;\n background-color: #428bca;\n border-color: #357ebd;\n}\n\n.ui-dialog-footer button[autofocus]:hover,\n.ui-dialog-footer button[autofocus]:focus,\n.ui-dialog-footer button[autofocus]:active {\n color: #ffffff;\n background-color: #3276b1;\n border-color: #285e8e;\n}\n\n.ui-dialog-footer button[autofocus]:active {\n background-image: none;\n}\n.ui-popup-top-left .ui-dialog,\n.ui-popup-top .ui-dialog,\n.ui-popup-top-right .ui-dialog {\n top: -8px;\n}\n.ui-popup-bottom-left .ui-dialog,\n.ui-popup-bottom .ui-dialog,\n.ui-popup-bottom-right .ui-dialog {\n top: 8px;\n}\n.ui-popup-left-top .ui-dialog,\n.ui-popup-left .ui-dialog,\n.ui-popup-left-bottom .ui-dialog {\n left: -8px;\n}\n.ui-popup-right-top .ui-dialog,\n.ui-popup-right .ui-dialog,\n.ui-popup-right-bottom .ui-dialog {\n left: 8px;\n}\n\n.ui-dialog::before,\n.ui-dialog::after {\n content: '';\n position: absolute;\n display: none;\n width: 0;\n height: 0;\n overflow:hidden;\n border:8px dashed transparent;\n}\n.ui-popup-anchor .ui-dialog::before,\n.ui-popup-anchor .ui-dialog::after{\n display: block;\n}\n.ui-popup-top-left .ui-dialog::before,\n.ui-popup-top .ui-dialog::before,\n.ui-popup-top-right .ui-dialog::before {\n bottom: -16px;\n border-top:8px solid #7C7C7C;\n}\n.ui-popup-top-left .ui-dialog::after,\n.ui-popup-top .ui-dialog::after,\n.ui-popup-top-right .ui-dialog::after {\n bottom: -15px;\n border-top:8px solid #fff;\n}\n.ui-popup-top-left .ui-dialog::before,\n.ui-popup-top-left .ui-dialog::after {\n left: 15px;\n}\n.ui-popup-top .ui-dialog::before,\n.ui-popup-top .ui-dialog::after {\n left: 50%;\n margin-left: -8px;\n}\n.ui-popup-top-right .ui-dialog::before,\n.ui-popup-top-right .ui-dialog::after {\n right: 15px;\n}\n.ui-popup-bottom-left .ui-dialog::before,\n.ui-popup-bottom .ui-dialog::before,\n.ui-popup-bottom-right .ui-dialog::before {\n top: -16px;\n border-bottom:8px solid #7C7C7C;\n}\n.ui-popup-bottom-left .ui-dialog::after,\n.ui-popup-bottom .ui-dialog::after,\n.ui-popup-bottom-right .ui-dialog::after {\n top: -15px;\n border-bottom:8px solid #fff;\n}\n.ui-popup-bottom-left .ui-dialog::before,\n.ui-popup-bottom-left .ui-dialog::after {\n left: 15px;\n}\n.ui-popup-bottom .ui-dialog::before,\n.ui-popup-bottom .ui-dialog::after {\n margin-left: -8px;\n left: 50%;\n}\n.ui-popup-bottom-right .ui-dialog::before,\n.ui-popup-bottom-right .ui-dialog::after {\n right: 15px;\n}\n.ui-popup-left-top .ui-dialog::before,\n.ui-popup-left .ui-dialog::before,\n.ui-popup-left-bottom .ui-dialog::before {\n right: -16px;\n border-left:8px solid #7C7C7C;\n}\n.ui-popup-left-top .ui-dialog::after,\n.ui-popup-left .ui-dialog::after,\n.ui-popup-left-bottom .ui-dialog::after {\n right: -15px;\n border-left:8px solid #fff;\n}\n.ui-popup-left-top .ui-dialog::before,\n.ui-popup-left-top .ui-dialog::after {\n top: 15px;\n}\n.ui-popup-left .ui-dialog::before,\n.ui-popup-left .ui-dialog::after {\n margin-top: -8px;\n top: 50%;\n}\n.ui-popup-left-bottom .ui-dialog::before,\n.ui-popup-left-bottom .ui-dialog::after {\n bottom: 15px;\n}\n.ui-popup-right-top .ui-dialog::before,\n.ui-popup-right .ui-dialog::before,\n.ui-popup-right-bottom .ui-dialog::before {\n left: -16px;\n border-right:8px solid #7C7C7C;\n}\n.ui-popup-right-top .ui-dialog::after,\n.ui-popup-right .ui-dialog::after,\n.ui-popup-right-bottom .ui-dialog::after {\n left: -15px;\n border-right:8px solid #fff;\n}\n.ui-popup-right-top .ui-dialog::before,\n.ui-popup-right-top .ui-dialog::after {\n top: 15px;\n}\n.ui-popup-right .ui-dialog::before,\n.ui-popup-right .ui-dialog::after {\n margin-top: -8px;\n top: 50%;\n}\n.ui-popup-right-bottom .ui-dialog::before,\n.ui-popup-right-bottom .ui-dialog::after {\n bottom: 15px;\n}\n\n.ui-dialog-loading {\n vertical-align: middle;\n display: inline-block;\n overflow: hidden;\n width: 32px;\n height: 32px;\n font-size: 0;\n text-indent: -999em;\n color: #666;\n}\n.ui-dialog-loading {\n width: 100%\\9;\n text-indent: 0\\9;\n line-height: 32px\\9;\n text-align: center\\9;\n font-size: 12px\\9;\n}\n\n.ui-dialog-loading::after {\n position: absolute;\n content: '';\n width: 3px;\n height: 3px;\n margin: 14.5px 0 0 14.5px;\n border-radius: 100%;\n box-shadow: 0 -10px 0 1px #ccc, 10px 0px #ccc, 0 10px #ccc, -10px 0 #ccc, -7px -7px 0 0.5px #ccc, 7px -7px 0 1.5px #ccc, 7px 7px #ccc, -7px 7px #ccc;\n -webkit-transform: rotate(360deg);\n -webkit-animation: ui-dialog-loading 1.5s infinite linear;\n transform: rotate(360deg);\n animation: ui-dialog-loading 1.5s infinite linear;\n display: none\\9;\n}\n\n@-webkit-keyframes ui-dialog-loading {\n 0% {-webkit-transform: rotate(0deg);}\n 100% {-webkit-transform: rotate(360deg);}\n}\n@keyframes ui-dialog-loading {\n 0% {transform: rotate(0deg);}\n 100% {transform: rotate(360deg);}\n}\n"],sourceRoot:"webpack://"}])},function(o,t,i){t=o.exports=i(5)(),t.i(i(4),""),t.push([o.id,".ui-notice{padding:10px;border:1px solid #000;border-radius:5px;background:rgba(0,0,0,.7);color:#fff}","",{version:3,sources:["/./src/css/ui-notice.css"],names:[],mappings:"AACA,WACI,aAAc,AACd,sBAAmC,AACnC,kBAAmB,AACnB,0BAA8B,AAC9B,UAAY,CACf",file:"ui-notice.css",sourcesContent:["@import url('./ui-popup.css');\n.ui-notice {\n padding: 10px;\n border: 1px solid rgba(0, 0, 0, 9);\n border-radius: 5px;\n background: rgba(0, 0, 0, .7);\n color: #FFF;\n}"],sourceRoot:"webpack://"}])},function(o,t,i){var e=i(13);"string"==typeof e&&(e=[[o.id,e,""]]);i(6)(e,{});e.locals&&(o.exports=e.locals)},function(o,t,i){var e=i(14);"string"==typeof e&&(e=[[o.id,e,""]]);i(6)(e,{});e.locals&&(o.exports=e.locals)},function(o,t,i){var e=i(15);"string"==typeof e&&(e=[[o.id,e,""]]);i(6)(e,{});e.locals&&(o.exports=e.locals)},function(o,t,i){var e=i(4);"string"==typeof e&&(e=[[o.id,e,""]]);i(6)(e,{});e.locals&&(o.exports=e.locals)}]); 4 | //# sourceMappingURL=angular-popups.js.map --------------------------------------------------------------------------------