jquery自定义alert插件

css

无论是网页还是手机自带的alert提示框，样式丑到惊人，然UI设计不允许这么丑的东西出现（轻度强迫症）。此外，默认alert只有一个message参数可设置，如果要自定义标题或其他，这该如何是好~~~
那么如何按自己的想法diy一个样式正常可自定义标题等的alert框。下面走起。

接下来使用jquery动态生成的html和css来自定义一个输入框，这样的好处是在有需要的时候出现输入框代码，不需要的时候清除掉。

jquery代码：
(function () {
$.LoadingMask = {
        Loading: function () {
            GenerateHtml();
        }
    }
    //生成Html
    var GenerateHtml = function () {
        var _html = "";
        _html += '<div id="loading_box"></div><div id="loading_con" class="load-container loading"><div id="mb_tit"  class="loader">'+'</div>';
        _html += '</div></div>';
        $("body").append(_html); GenerateCss();
    }
    //生成Css
    var GenerateCss = function () {
        $("#loading_box").css({
            width: '100%', zIndex: '2', position: 'fixed', overflow: 'hidden',
            filter: 'Alpha(opacity=60)', backgroundColor: 'white', top: '0', left: '0', opacity: '0.6'
        });
        $("#loading_con").css({
            zIndex: '3', width: '100%', position: 'fixed', textAlign: 'center',backgroundColor: 'White', overflow: 'hidden'
        });
    //调整alert框位置
        var win_height = $(window).height();
        var win_width = $(window).width();
        var boxWidth = $("#loading_con").width();
        var boxHeight = $("#loading_con").height();
        //让提示框居中
        $("#loading_box").height(win_height);
        $("#loading_con").css({ top: (win_height - boxHeight) / 2, left: (win_width - boxWidth) / 2});
}
})();

以上完毕。alert框样式如下（markdown无法上传本地图片呵呵）