[AngularJS] EasyModal - alert - confirm - modal

最新推荐文章于 2022-01-01 23:55:06 发布

转载最新推荐文章于 2022-01-01 23:55:06 发布 · 735 阅读

EasyModal 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在AngularJS应用中使用的模态对话框工具emodal，它提供了增强的弹窗功能，如自定义样式、回调函数等，并且演示了如何创建警报、确认对话框及具有额外按钮的模态窗口。

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;
};