簡單的提示框

//提示框

    $.MsgBox = {

        Alert : function(title, msg, callback) {

            GenerateHtml("alert", title, msg);

            btnOk(callback); // 當alert隻是彈出消息時，沒必要用到回調函數callback

            btnNo();

        },

        Confirm : function(title, msg, callback) {

            GenerateHtml("confirm", title, msg);

            btnOk(callback);

            btnNo();

        }

    };

    // 生成Html

    var GenerateHtml = function(type, title, msg) {

        var _html = "";

        _html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">'

                + title + '</span>';

        _html += //點選x會導緻alert的回調函數無法執行先注釋

                '<div id="mb_msg">' + msg

                + '</div><div id="mb_btnbox">';

        if (type == "alert") {

            _html += '<input id="mb_btn_ok" type="button" value="确定" />';

        }

        if (type == "confirm") {

            _html += '<input id="mb_btn_ok" type="button" value="确定" />';

            _html += '<input id="mb_btn_no" type="button" value="取消" />';

        }

        _html += '</div></div>';

        // 必須先将_html添加到body，再設定Css樣式

        $("body").append(_html);

        // 生成Css

        GenerateCss();

    };

    // 生成Css

    var GenerateCss = function() {

        $("#mb_box").css({

            width : '100%',

            height : '100%',

            zIndex : '99999',

            position : 'fixed',

            filter : 'Alpha(opacity=60)',

            backgroundColor : 'black',

            top : '0',

            left : '0',

            opacity : '0.6'

        });

        $("#mb_con").css({

            zIndex : '99999',

            width : '400px',

            position : 'fixed',

            backgroundColor : 'White',

            borderRadius : '10px'

        });

        $("#mb_tit").css({

            display : 'block',

            fontSize : '14px',

            color : '#449d44',

            padding : '10px 15px',

            backgroundColor : '#DDD',

            borderRadius : '10px 10px 0 0',

            fontWeight : 'bold'

        });

        $("#mb_msg").css({

            padding : '20px',

            lineHeight : '20px',

            borderBottom : '1px solid #DDD',

            textAlign : 'center',

            fontSize : '17px'

        });

//        $("#mb_ico").css({

//            display : 'block',

//            position : 'absolute',

//            right : '10px',

//            top : '9px',

//            width : '18px',

//            height : '18px',

//            textAlign : 'center',

//            lineHeight : '16px',

//            color:'black',

//            borderRadius : '12px',

//            fontFamily : '微軟雅黑'

//        });

        $("#mb_btnbox").css({

            margin : '15px 0 10px 0',

            textAlign : 'center'

        });

        $("#mb_btn_ok,#mb_btn_no").css({

            width : '85px',

            height : '30px',

            color : 'white',

            border : 'none',

            borderRadius : '5px'

        });

        $("#mb_btn_ok").css({

            backgroundColor : '#5cb85c'

        });

        $("#mb_btn_ok").hover(function(){

            $(this).css({

                backgroundColor : '#449d44'

            });

        },function(){

            $(this).css({

                backgroundColor : '#5cb85c'

            });

        });

        $("#mb_btn_no").css({

            backgroundColor : 'gray',

            marginLeft : '20px'

        });

//        // 右上角關閉按鈕hover樣式

//        $("#mb_ico").hover(function() {

//            $(this).css({

//                backgroundColor : '#398439',

//                color : 'White'

//            });

//        }, function() {

//            $(this).css({

//                backgroundColor : '#DDD',

//                color : 'black'

//            });

//        });

        var _widht = document.documentElement.clientWidth; // 螢幕寬

        var _height = document.documentElement.clientHeight; // 螢幕高

        var boxWidth = $("#mb_con").width();

        var boxHeight = $("#mb_con").height();

        // 讓提示框居中

        $("#mb_con").css({

            top : (_height - boxHeight) / 3 + "px",

            left : (_widht - boxWidth) / 2 + "px"

        });

    };

    // 确定按鈕事件

    var btnOk = function(callback) {

        $("#mb_btn_ok").click(function() {

            $("#mb_box,#mb_con").remove();

            if (typeof (callback) == 'function') {

                callback();

            }

        });

    };

    // 取消按鈕事件

    var btnNo = function() {

        $("#mb_btn_no").click(function() {

            $("#mb_box,#mb_con").remove();

        });

    };

 我把右上角的X注釋了,因為希望使用者隻點選 确認和取消 

用法: $.MsgBox.Alert("提示","執行成功!")

$.MsgBox.Alert("提示","執行成功!",function(){"回調函數"})