EasyModal Examples

最新推荐文章于 2020-08-10 20:04:52 发布

转载最新推荐文章于 2020-08-10 20:04:52 发布 · 438 阅读

EasyModal 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于Angular的简易模态框服务实现示例，包括简易警告框、确认框及自定义模态框等功能，展示了如何通过Angular指令和服务来创建交互式的模态窗口。

<body ng-app = "easyModalApp" class="container">
<div ng-controller="easyAlertController">
<p><h3>Easy Alert Examples:</h3>
<button class="btn btn-info" ng-click="showModal1()" type="button">Simple Alert</button>
<button class="btn btn-info" ng-click="showModal2()" type="button">New Button Label and Fadein</button>
</div>
<p></p>
<div ng-controller="easyConfirmController">
<p><h3>Easy Confirm Examples:</h3>
<button class="btn btn-success" ng-click="showModal1()" type="button">Simple Confirm</button>
<button class="btn btn-success" ng-click="showModal2()" type="button">Simple Confirm with New Label</button>
<button class="btn btn-success" ng-click="showModal3()" type="button">Simple Confirm with Callback Args</button>
<h4 class="bg-info text-primary">{{data}}</h4>
</div>
<p></p>
<div ng-controller="easyModalController">
<p><h3>Easy Modal Examples:</h3>
<button class="btn btn-default" ng-click="showModal1()" type="button">Simple String Template</button>

<button class="btn btn-default" ng-click="showModal3()" type="button">Callback Function</button>
<button class="btn btn-default" ng-click="showModal4()" type="button">Extern Controller</button>
<button class="btn btn-default" ng-click="showModal5()" type="button">Extra Buttons with Callback</button>
<h4 class="bg-info text-primary">{{data}}</h4>
</div>

</body>

================================================================================================

Easy Alert Examples:

Easy Confirm Examples:

Easy Modal Examples:

//below is angular-easymodal.min.js

angular.module("emodalService",[]).factory("emodal",["$document","$compile","$rootScope","$controller","$timeout",function(l,a,e,n,o){var t={},c=l.find("body"),s={id:null,title:null,template:null,templateClass:null,templateUrl:null,footerTemplate:null,backdrop:!0,backdropClass:"modal-backdrop",backdropCancel:!0,okLabel:"OK",okClass:"btn btn-primary",okShow:!0,okCallback:null,okCallbackObj:null,okArgs:null,cancelLabel:"Cancel",cancelClass:"btn",cancelShow:!1,cancelCallback:null,cancelCallbackObj:null,cancelArgs:null,fadein:null,modalClass:"modal",controller:null,buttons:null,css:{top:"15%",margin:"0 auto"}};return t.alert=function(){var l={};arguments[1]instanceof Object&&(l=arguments[1]),l.template=arguments[0],this.modal(l,"alert")},t.confirm=function(){var l={};arguments[3]instanceof Object&&(l=arguments[3]),void 0!=arguments[2]&&(arguments[2]instanceof Function?l.cancelCallback=arguments[2]:l=arguments[2]),l.template=arguments[0],l.okCallback=arguments[1],l.cancelShow=!0,this.modal(l,"confirm")},t.modal=function(l,t,d){var r=!1,m=!1;arguments.length>0?(angular.isObject(l)?(d=t,t=l,"alert"==d&&(r=!0),"confirm"==d&&(m=!0)):(t=null==t?{}:t,t.templateUrl=l),t=angular.extend({},s,t)):t=s;var i=t.id?' id="'+t.id+'" ':"",u="";if((t.okShow||t.okCallback)&&(u+='<button class="'+t.okClass+'" ng-click="$modalOK()">{{$modalOKLabel}}</button>'),(t.cancelShow||t.cancelCallback)&&(u+='<button class="'+t.cancelClass+'" ng-click="$modalCancel()">{{$modalCancelLabel}}</button>'),t.buttons)for(var b=0;b<t.buttons.length;b++){var k=t.buttons[b];u+='<button class="'+k["class"]+'" ng-click="$modalButton('+b+')">'+k.label+"</button>"}var C='<div class="modal-footer">'+(t.footerTemplate||u)+"</div>";r&&(t.templateClass=t.templateClass||"alert alert-info"),m&&(t.templateClass=t.templateClass||"alert alert-danger");var v=function(){return t.template?angular.isString(t.template)?'<div class="modal-body '+t.templateClass+'">'+t.template+"</div>":'<div class="modal-body">'+t.template.html()+"</div>":t.templateUrl?'<div class="modal-body" ng-include="\''+t.templateUrl+"'\"></div>":'<div class="modal-body"></div>'}(),p='<div class="'+t.modalClass+' fade"'+i+' style="display: block;">';p+=r||m?' <div class="modal-dialog modal-sm"> <div class="modal-content">':' <div class="modal-dialog"> <div class="modal-content">',p+=t.title?' <div class="modal-header"> <button type="button" class="close" ng-click="$modalClose()">×</button> <h3>{{$title}}</h3> </div>':r||m?' <div class="modal-header"></div>':' <div class="modal-header"> <button type="button" class="close" ng-click="$modalClose()">×</button> </div>',p+=v+C+" </div> </div></div>";var g=angular.element(p);for(key in t.css)g.css(key,t.css[key]);var f="<div ";t.backdropCancel&&(f+='ng-click="$modalCancel()"'),f+=">";var $=angular.element(f);$.addClass(t.backdropClass),$.addClass("fade in");var y=function(l){27===l.keyCode&&w.$modalCancel()},h=function(){c.unbind("keydown",y),g.remove(),t.backdrop&&$.remove()};c.bind("keydown",y);var O,j,w=t.scope||e.$new();w.$title=t.title,w.$modalClose=h,w.$modalOK=function(){t.okCallback&&t.okCallback.call(t.okCallbackObj,t.okArgs),w.$modalClose()},w.$modalCancel=function(){t.cancelCallback&&t.cancelCallback.call(t.cancelCallbackObj,t.cancelArgs),w.$modalClose()},w.$modalButton=function(l){var a=t.buttons[l];a.callback&&a.callback.call(a.callbackObj,a.args),w.$modalClose()},w.$modalOKLabel=t.okLabel,w.$modalCancelLabel=t.cancelLabel,t.controller&&(j=angular.extend({$scope:w},d),O=n(t.controller,j),g.contents().data("$ngControllerController",O)),a(g)(w),a($)(w),c.append(g),t.backdrop&&c.append($),t.fadein&&o(function(){w.$modalClose()},t.fadein),o(function(){g.addClass("in")},200)},t}]);