自定义浏览器alert ,抛弃掉死板的蓝框 自定义风格提示框。jquey ui bootstrap 实现自定义 alert confirm prompt ,by大崔
2014-11-13 10:19
211 查看
首先看一下自定义提示框的效果图
alert 普通的提示当然可以自定义样式
![](http://images.cnitblog.com/blog/626446/201411/130945580065021.jpg)
confrim 确认框 支持callback
![](http://images.cnitblog.com/blog/626446/201411/130946349446607.jpg)
prompt 邀请用户输入框
![](http://images.cnitblog.com/blog/626446/201411/130947216634913.jpg)
以下是js的实现,
当前这个是整合了 jquery ui 和 bootstrap 自己封装的一个 alert 提示。
以下是调用代码
confirm //比可惜的是 js没法模拟 js脚本暂停 所以只能以回调函数的方式 来继续下一步操作。
shalert 就直接用就行了。和 js的alert 效果一样。
源码我已经放在了 百度网盘上,欢迎大家学习交流。
源码下载地址
http://pan.baidu.com/s/1c00Cl36
这个控件其实还有可重构的部分,比如初始化方法等等这些都没有提取出来,因为任务紧所以先这么用着。
下一次优化时会处理这些问题。
原版风格是这样的,可以通过修改引用的css上实现 demo上有详细说明。
![](http://images.cnitblog.com/blog/626446/201411/131030157102099.jpg)
![](http://images.cnitblog.com/blog/626446/201411/131030215858859.jpg)
![](http://images.cnitblog.com/blog/626446/201411/131030273032107.jpg)
alert 普通的提示当然可以自定义样式
![](http://images.cnitblog.com/blog/626446/201411/130945580065021.jpg)
confrim 确认框 支持callback
//message 提示的信息 ,callback(true/false)回调函数 window.shconfirm = function (message, callback) 回调函数参数为 true/false
![](http://images.cnitblog.com/blog/626446/201411/130946349446607.jpg)
prompt 邀请用户输入框
//message 提示的信息 ,callback(msg)回调函数(用户输入的消息), param:regex 输入的 正则验证,regexmsg 正则验证不通过的提示 window.shprompt = function (message, callback, regex, regexmsg) 这里 message 为提示消息 * callback 为回调函数 * 回传参数为 用户输入的值(userinputmsg) regex 和 regexmsg 这2个参数是 选填项 用于验证用户输入,2个参数需要同时出现。不能单独使用。
![](http://images.cnitblog.com/blog/626446/201411/130947216634913.jpg)
以下是js的实现,
当前这个是整合了 jquery ui 和 bootstrap 自己封装的一个 alert 提示。
(function () { var _shconfirm = {}; var _shprompt = {}; //闭包初始化; $(function () { $("#dialogalert").dialog({ modal: true, autoOpen: false, show: { effect: "blind", duration: 500 }, hide: { effect: "explode", duration: 500 }, buttons: { 确定: function () { $(this).dialog("close"); } } }); $("#dialogconfirm").dialog({ modal: true, autoOpen: false, show: { effect: "slide", duration: 500 }, hide: { effect: "drop", duration: 500 }, buttons: { 确定: function () { _shconfirm.shconfirmCallBack(true); $(this).dialog("close"); }, 取消: function () { _shconfirm.shconfirmCallBack(false); $(this).dialog("close"); } } }); $("#dialogprompt").dialog({ modal: true, autoOpen: false, show: { effect: "blind", duration: 500 }, hide: { effect: "puff", duration: 500 }, buttons: { 确定: function () { if (_shprompt.shpromptObj.regex) { if (!_shprompt.shpromptObj.regex.test($("#dialogprompt .text").val())) { $("#dialogprompt .alert .promptmsg").html(_shprompt.shpromptObj.regexmsg); $("#dialogprompt .alert").slideDown(); return; } else { $("#dialogprompt .alert").hide(); } } _shprompt.shpromptObj.callback($("#dialogprompt .text").val()); $(this).dialog("close"); }, 取消: function () { _shprompt.shpromptObj.callback($("#dialogprompt .text").val()); $(this).dialog("close"); } } }); }); window.shalert = function (message) { $("#dialogalert .msgcontent").html(message); $("#dialogalert").dialog("open"); }; //message 提示的信息 ,callback(true/false)回调函数 window.shconfirm = function (message, callback) { $("#dialogconfirm .msgcontent").html(message); $("#dialogconfirm").dialog("open"); _shconfirm.shconfirmCallBack = callback; }; //message 提示的信息 ,callback(msg)回调函数(用户输入的消息), param:regex 输入的 正则验证,regexmsg 正则验证不通过的提示 window.shprompt = function (message, callback, regex, regexmsg) { $("#dialogprompt .msgcontent").html(message); $("#dialogprompt").dialog("open"); _shprompt.shpromptObj = { callback: callback, regex: regex, regexmsg: regexmsg }; } })();
以下是调用代码
confirm //比可惜的是 js没法模拟 js脚本暂停 所以只能以回调函数的方式 来继续下一步操作。
function ShConfirm() { shconfirm("确定要这么做吗!", function (result) { if (result) { alert("点击了确定"); } else { alert("点击了取消"); } }); }
function ShPrompt() { shprompt("请问1+1等于几!", function (text) { alert("用户输入了:" + text); }, /^\d{1,}$/, "请输入数字!"); }
shalert 就直接用就行了。和 js的alert 效果一样。
<input type="button" name="name" value="ShAlert" onclick="shalert('保存成功!');" /> <input type="button" name="name" value="ShConfirm" onclick="ShConfirm()" /> <input type="button" name="name" value="ShPrompt" onclick="ShPrompt()" />
源码我已经放在了 百度网盘上,欢迎大家学习交流。
源码下载地址
http://pan.baidu.com/s/1c00Cl36
这个控件其实还有可重构的部分,比如初始化方法等等这些都没有提取出来,因为任务紧所以先这么用着。
下一次优化时会处理这些问题。
原版风格是这样的,可以通过修改引用的css上实现 demo上有详细说明。
![](http://images.cnitblog.com/blog/626446/201411/131030157102099.jpg)
![](http://images.cnitblog.com/blog/626446/201411/131030215858859.jpg)
![](http://images.cnitblog.com/blog/626446/201411/131030273032107.jpg)
![](file:///C:\Users\chuiyuanwo\AppData\Roaming\Tencent\Users\759666247\QQ\WinTemp\RichOle\ZH{~V0NYAFM8]GNVHHN42`A.jpg)
相关文章推荐
- jquery ui bootstrap 实现自定义风格
- jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件[附实例演示]
- Lance老师UI系列教程第五课->自定义风格单选多选对话框的实现
- JavaScript confirm 自定义风格及功能实现
- UIWebView 自定义网页中的alert和confirm提示框风格
- 用 WeifenLuo.WinFormsUI 实现 VS2005 风格的多页签浏览器
- UIWebView 自定义网页中的alert和confirm提示框风格
- 如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
- 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
- jquery自定义对话框alert、confirm和prompt
- 自定义alert,confirm,prompt事件,模仿window.alert(),confirm(),prompt()
- JS 提示框 alert()、confirm()、prompt()的三者的区别
- Android AlertDialog对话框自定义风格的另类实现
- 用JQuery UI dialog实现Alert和Confirm功能
- 如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
- jquery自定义对话框alert、confirm和prompt
- 用JQuery UI dialog实现Alert和Confirm功能
- Lance老师UI系列教程第五课->自定义风格单选多选对话框的实现
- jquery自定义对话框alert、confirm和prompt