[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.
2. confirm
This aims to provide the function like traditional JS confirm, but with more customize properties.
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:
[For online live example, see]:
emodal online example
[For Details, see]:
Documentation Page
[For source code, refer to]:
easymodal.js on Github
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
}
// 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;};
emodal online example
[For Details, see]:
Documentation Page
[For source code, refer to]:
easymodal.js on Github
0 0
- [AngularJS] EasyModal - alert - confirm - modal
- Angularjs 利用 $modal 实现 confirm 弹窗
- 如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
- 利用bootstrap的modal组件自定义alert,confirm和modal对话框
- AngularJS - $modal
- react-native-modal-alert
- alert,confirm,prompt用法
- JS----- <<<<<alert>>>><<<<<confirm>>>>><<<<<prompt>>>>>
- alert和confirm相关
- 重写alert、confirm
- webview alert confirm 重写
- 自定义alert和confirm
- 重写alert和confirm
- alert()、confirm()、prompt()用法
- alert confirm prompt
- /*Alert,prompt,confirm*/
- 【JavaScript】alert()confirm() prompt()
- 处理alert、confirm、prompt
- Retrofit使用一:超简单先用上
- Sublime Text 3 快捷键总结(拿走)
- 自定义抽屉—QQ特效
- 使用maven的profile和filter插件管理配置项
- LeetCode *** 33. Search in Rotated Sorted Array
- [AngularJS] EasyModal - alert - confirm - modal
- PAT (Basic Level) Practise (中文)1024. 科学计数法 (20)
- WebLogic配置JNDI数据源
- php 实现简单的登录
- Oracle--通配符、Escape转义字符、模糊查询语句
- jdk默认提供的类加载器
- android dumpsys实时查看各service状态
- 蓝桥杯~凑算式
- C#如何在Form启动时控制焦点落在某一个控件上?