更改alert样式

JS调用

 <script type="text/javascript">
        function _alert() {
            win.alert('系统提示', '这是alert效果!');
        }

        function _confirm() {
            win.confirm('系统提示', '确定这是confirm效果吗?', function (r) {
                win.alertEx('结果:' + (r ? "是" : "不是"))
            });
        }

        function _openDlg() {
            win.open(600, 400, 'window.js例子', '/');
        }
    </script>

JS

var win = new function () {
    // 确认框和提示框宽度
    this.width = 400;

    // 确认框和提示框高度
    this.height = 200;

    // 手动关闭窗体
    this.close = function () {
        $('.win iframe').remove();
        $('.win').remove();
    };

    // 打开窗体
    this.open = function (width, height, title, url, closed) {
        this._close = function () {
            this.close();
            if ($.isFunction(closed)) closed();
        };

        var html = '<div class="win"><div class="mask-layer"></div><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe><div class="title"><h3></h3></div><a href="javascript:void(0)" onclick="win._close();" class="close-btn" title="关闭">×</a><iframe class="body-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" src=""></iframe></div></div>';
        var jq = $(html);
        jq.find(".window-panel").height(height).width(width).css("margin-left", -width / 2).css("margin-top", -height / 2);
        jq.find(".title").find(":header").html(title);
        jq.find(".body-panel").height(height - 36).attr("src", url);
        jq.appendTo('body').fadeIn();
        $(".win .window-panel").focus();
    };

    // 显示消息框
    function messageBox(html, title, message) {
        win.close();
        var jq = $(html);

        jq.find(".window-panel").height(win.height).width(win.width).css("margin-left", -win.width / 2).css("margin-top", -win.height / 2);
        jq.find(".title-panel").height(win.height);
        jq.find(".title").find(":header").html(title);
        jq.find(".body-panel").height(win.height - 36);
        jq.find(".content").html(message.replace('\\r\\n', '<br/>'));
        jq.appendTo('body').show();
        $(".win .w-btn:first").focus();
    }

    // 确认框
    this.confirm = function (title, message, selected) {
        this._close = function (r) {
            this.close();
            if ($.isFunction(selected)) selected(r);
        };

        var html = '<div class="win"><div class="mask-layer"></div><div class="window-panel">' +
            '<iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">' +
            '</iframe><div class="title"><h3></h3></div><a href="javascript:void(0)" onclick="win._close(false);" class="close-btn" title="关闭">' +
            '×</a><div class="body-panel"><p class="content"></p><p class="btns"><button class="w-btn" tabindex="1" onclick="win._close(true);">确定</button>' +
            '<button class="w-btn" onclick="win._close(false);">取消</button></p></div></div></div>';
        messageBox(html, title, message);
    };

    // 提示框
    this.alert = function (title, message, closed) {
        this._close = function () {
            this.close();
            if ($.isFunction(closed)) closed();
        };

        var html = '<div class="win"><div class="mask-layer">' +
            '</div><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">' +
            '</iframe><div class="title"><h3></h3></div><a href="javascript:void(0)" onclick="win._close();" class="close-btn" title="关闭">×' +
            '</a><div class="body-panel"><p class="content"></p><p class="btns"><button class="w-btn" tabindex="1" onclick="win._close();">确定</button></p>' +
            '</div></div></div>';
        messageBox(html, title, message);
    }

    // 提示框
    this.alertEx = function (message) {
        this.alert('系统提示', message);
    }
};

css

.win {
    display: none;
}

.mask-layer {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    filter: alpha(opacity=50);
    background-color: black;
    z-index: 99998;
    top: 0px;
    left: 0px;
}

.window-panel {
    position: fixed;
    z-index: 99999;
    top: 50%;
    left: 50%;
    background-color: white;
    border-radius: 4px;
}

.window-panel .title-panel {
    position: absolute;
    height: 36px;
    width: 100%;
    border-radius: 4px 4px 0 0;
}

.window-panel .title {
    position: absolute;
    height: 36px;
    width: 100%;
    text-align: center;
    border-radius: 4px 4px 0 0;
    line-height: 36px;
    vertical-align: middle;
    background-color: whitesmoke; /*标题背景色*/
    border-bottom: 1px solid rgb(233, 233, 233);
    z-index: 1;
}

.window-panel h3 {
    font-size: 16px;
    margin: 0;
    line-height: inherit;
}

.window-panel .close-btn {
    display: block;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    width: 36px;
    height: 36px;
    line-height: 36px;
    right: 0px;
    text-decoration: none;
    font-size: 24px;
    color: black;
    background-color: #DBDBDB;
    border-radius: 2px;
    z-index: 1;
}

.window-panel .close-btn:hover {
    background-color: #ccc;
}

.window-panel .body-panel {
    position: absolute;
    width: 100%;
    top: 36px;
    border-radius: 0 0 4px 4px;
    z-index: 1;
}

.window-panel .content, .window-panel .btns {
    text-align: center;
}

.window-panel .content {
    padding: 18px 5px 0px 5px;
    font-size: 16px;
    min-height: 40px;
    line-height: 22px;
}

.window-panel .w-btn {
    display: inline-block;
    width: 60px;
    height: 26px;
    line-height: 26px;
    background-color: #18a5cb;
    color: white;
    cursor: pointer;
    text-align: center;
    border-radius: 2px;
    text-decoration: none;
    margin: 0 10px 0px 10px;
    border: none;
}

.window-panel .w-btn:hover {
    background-color: #127995;
}

.window-panel .w-btn:focus {
    outline: 0 none;
}