首页 > 代码库 > 自定义浏览器alert ，抛弃掉死板的蓝框 自定义风格提示框。jquey ui bootstrap 实现自定义 alert confirm prompt ,by大崔
自定义浏览器alert ，抛弃掉死板的蓝框 自定义风格提示框。jquey ui bootstrap 实现自定义 alert confirm prompt ,by大崔
首先看一下自定义提示框的效果图
alert 普通的提示当然可以自定义样式
confrim 确认框 支持callback
//message 提示的信息 ,callback(true/false)回调函数 window.shconfirm = function (message, callback)
回调函数参数为 true/false 
prompt 邀请用户输入框
//message 提示的信息 ,callback(msg)回调函数（用户输入的消息）, param：regex 输入的 正则验证，regexmsg 正则验证不通过的提示 window.shprompt = function (message, callback, regex, regexmsg)
这里 message 为提示消息 *
callback 为回调函数 * 回传参数为 用户输入的值(userinputmsg)
regex 和 regexmsg 这2个参数是 选填项 用于验证用户输入，2个参数需要同时出现。不能单独使用。
以下是js的实现，
当前这个是整合了 jquery ui 和 bootstrap 自己封装的一个 alert 提示。
1 (function () { 2 var _shconfirm = {}; 3 var _shprompt = {}; 4 //闭包初始化； 5 $(function () { 6 $("#dialogalert").dialog({ 7 modal: true, 8 autoOpen: false, 9 show: { 10 effect: "blind", 11 duration: 500 12 }, 13 hide: { 14 effect: "explode", 15 duration: 500 16 }, 17 buttons: { 18 确定: function () { 19 $(this).dialog("close"); 20 } 21 } 22 });
23 $("#dialogconfirm").dialog({ 24 modal: true, 25 autoOpen: false, 26 show: { 27 effect: "slide", 28 duration: 500 29 }, 30 hide: { 31 effect: "drop", 32 duration: 500 33 }, 34 buttons: { 35 确定: function () { 36 _shconfirm.shconfirmCallBack(true); 37 $(this).dialog("close"); 38 }, 39 40 取消: function () { 41 _shconfirm.shconfirmCallBack(false); 42 $(this).dialog("close"); 43 44 } 45 } 46 }); 47 $("#dialogprompt").dialog({ 48 modal: true, 49 autoOpen: false, 50 show: { 51 effect: "blind", 52 duration: 500 53 }, 54 hide: { 55 effect: "puff", 56 duration: 500 57 }, 58 buttons: { 59 确定: function () { 60 if (_shprompt.shpromptObj.regex) { 61 if (!_shprompt.shpromptObj.regex.test($("#dialogprompt .text").val())) { 62 $("#dialogprompt .alert .promptmsg").html(_shprompt.shpromptObj.regexmsg); 63 $("#dialogprompt .alert").slideDown(); 64 return; 65 } else { 66 $("#dialogprompt .alert").hide(); 67 } 68 } 69 _shprompt.shpromptObj.callback($("#dialogprompt .text").val()); 70 $(this).dialog("close"); 71 }, 72 73 取消: function () { 74 _shprompt.shpromptObj.callback($("#dialogprompt .text").val()); 75 $(this).dialog("close"); 76 77 } 78 } 79 }); 80 }); 81 82 window.shalert = function (message) { 83 $("#dialogalert .msgcontent").html(message); 84 $("#dialogalert").dialog("open"); 85 }; 86 //message 提示的信息 ,callback(true/false)回调函数 87 window.shconfirm = function (message, callback) { 88 $("#dialogconfirm .msgcontent").html(message); 89 $("#dialogconfirm").dialog("open"); 90 _shconfirm.shconfirmCallBack = callback; 91 }; 92 //message 提示的信息 ,callback(msg)回调函数（用户输入的消息）, param：regex 输入的 正则验证，regexmsg 正则验证不通过的提示 93 window.shprompt = function (message, callback, regex, regexmsg) { 94 $("#dialogprompt .msgcontent").html(message); 95 $("#dialogprompt").dialog("open"); 96 _shprompt.shpromptObj = { 97 callback: callback, 98 regex: regex, 99 regexmsg: regexmsg100 };101 }102 })();
以下是调用代码
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上有详细说明。
自定义浏览器alert ，抛弃掉死板的蓝框 自定义风格提示框。jquey ui bootstrap 实现自定义 alert confirm prompt ,by大崔
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。