你的位置:首页 > 软件开发 > Java > 利用bootstrap的modal组件自定义alert,confirm和modal对话框

利用bootstrap的modal组件自定义alert,confirm和modal对话框

发布时间:2016-03-01 11:00:10
由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件。本篇文章介绍自己在项目中基于bootstrap的modal组件,自定义alert,confirm和modal对话框的经验 ...

利用bootstrap的modal组件自定义alert,confirm和modal对话框

 

由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件。本篇文章介绍自己在项目中基于bootstrap的modal组件,自定义alert,confirm和modal对话框的经验,相对比较简单实用,希望能对你有所参考价值。(代码下载)

1. 实例展示

详细的代码可通过前面给出的下载链接下载源码去了解,代码量不大,这三个组件加起来只有200多行

利用bootstrap的modal组件自定义alert,confirm和modal对话框

如果你有javascript的组件开发经验,我这个层级的代码相信你一下子就能看明白。源码中我还给出了一个demo,这个demo模拟了一个比较贴近现实需求的一个场景:

1)用户点击界面上的某个按钮,打开之前定义的一个modal框:

利用bootstrap的modal组件自定义alert,confirm和modal对话框

2)用户在打开的modal框内填写一些表单,点击确定的时候,会触发一些校验:

没填email时:

利用bootstrap的modal组件自定义alert,confirm和modal对话框

填写了email之后:

利用bootstrap的modal组件自定义alert,confirm和modal对话框

这两个提示其实是为了演示Alert和Confirm的效果硬塞进去的,实际上可能没有这么别扭的功能。

3)在提示Password为空的时候,细心的人会发现那个确定按钮处于一个禁用的状态,这个考虑是因为确定按钮最终要完成的是一些异步任务,在异步任务成功完成之前,我希望modal组件都不要关闭,并且能够控制已点击的按钮不能重复点击;

4)我用setTimeout模拟了一个异步任务,这个异步任务在点击确定按钮之后,3s才会回调,并且:

当email输入admin@admin 的时候,会给出提交成功的提示,确定之后就会关闭所有的弹框:

利用bootstrap的modal组件自定义alert,confirm和modal对话框

当email输入其它值得时候,会给出提交失败的提示,并且modal框会依然显示在那里:

利用bootstrap的modal组件自定义alert,confirm和modal对话框

利用bootstrap的modal组件自定义alert,confirm和modal对话框

在组件定义里面,尤其是注册按钮这一块,我加了一些AOP编程的处理,同时利用了jquery的延迟对象,来实现我需要的异步编程,详情请阅读源码,有问题可以在评论区交流赐教。

2. 组件需求

有时候为了写一个好用的组件,只需要把它的大概原型和要对外部提供的接口确定下来,就已经完成这个组件编写最重要的工作了,虽然还没有开始编码。以本文要编写的这几个组件来说,我想要的这几个组件的原型和调用形式分别是这样的:

1)自定义alert框

原型是:

利用bootstrap的modal组件自定义alert,confirm和modal对话框

调用时最多需要两个参数,一个msg用来传递要显示的提示内容,一个onOk用来处理确定按钮点击时候的回调,调用形式有以下2种:

//1Alert('您选择的订单状态不符合当前操作的条件,请刷新列表显示最新数据后再继续操作!');//2Alert({  msg: '您选择的订单状态不符合当前操作的条件,请刷新列表显示最新数据后再继续操作!',  onOk: function(){  }});

原标题:利用bootstrap的modal组件自定义alert,confirm和modal对话框

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录