简单的提示框

//提示框
    $.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 += '

'
                + title + '
';
        _html += /*'x'*///点击x会导致alert的回调函数无法执行先注释
                '
' + msg
                + '
';
        if (type == "alert") {
            _html += '';
        }
        if (type == "confirm") {
            _html += '';
            _html += '';
        }
        _html += '
';
        // 必须先将_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_ico*/
        $("#mb_btn_no").click(function() {
            $("#mb_box,#mb_con").remove();
        });
    };

 我把右上角的X注释了,因为希望用户只点击 确认和取消 

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

$.MsgBox.Alert("提示","执行成功!",function(){"回调函数"})

你可能感兴趣的:(js,js,提示框)