自定义浏览器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: regexmsg
100         };
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上有详细说明。