[AngularJS] EasyModal - alert - confirm - modal

来源:互联网 发布:java笔试基础题 编辑:程序博客网 时间:2024/05/16 02:47
This easyModal can be used in AngularJS-base(with Bootstrap) web application, which is an alternative of JS alert and confirm dialog with enhanced functionality(html template, css, callback, external controller, etc.), more flexible, better user experience.

This tool provides three types of modal: alert, confirm and modal.

1. alert
This aims to provide the function like traditional JS alert, but with more customize properties.

emodal.alert("Messages go here!");
 

emodal.alert("<strong>Title</strong><p></p>Disappear in 2 seconds",               {okLabel:'New Label',okClass:'btn btn-success',fadein:2000}             );



 2. confirm
This aims to provide the function like traditional JS confirm, but with more customize properties.

emodal.confirm("Are you sure to delete?<p></p>It is not recoverable!",    function(){        // if OK is pressed    },
    function(){
        // if Cancel is pressed
    }
);

 
 3. modal
Modal aims to provide more functionality not as simple alert and confirm dialog. Generally the argument passed in is an object with the following peoperties:

 
emodal.modal({    template:'There are two extra buttons!',    title:'Extra Buttons Demo',    okCallback:okCallbackFun,    okArgs:{id:1},    cancelCallback:cancelCallbackFun,    cancelArgs:{info:'some text'},    buttons:[               {label:'Extra-1',class:'btn btn-warning',callback:extraCallBackFun1,args:{info:'from extra button 1'}},               {label:'Extra-2',class:'btn btn-success',callback:extraCallBackFun2,args:{info:'from extra button 2'}}             ]});
var okCallbackFun = function (arg) {    $scope.data = '[ok callback] Parameter: '+arg.id;};var cancelCallbackFun = function (arg) {    $scope.data = '[cancel callback] Parameter: '+arg.info;};var extraCallBackFun1 = function (arg) {    $scope.data = '[extra callback 1] Parameter: '+arg.info;};var extraCallBackFun2 = function (arg) {    $scope.data = '[extra callback 2] Parameter: '+arg.info;};

 
[For online live example, see]:   
emodal online example
[For Details, see]:   
Documentation Page

[For source code, refer to]:   
easymodal.js on Github
0 0