js通用弹框

/**
 * 用户强制退出活动弹框
 */
(function () {
    $.ForceQuitMsgBox = {
        forceQuitDialog: function (title, msg, callback,callback1) {
            GenerateHtml("confirm", title, msg);
            onMouseOver();
            btnOk(callback);
            btnNo(callback1);
            $("#mb_btn_no")[0].focus();
        }
    };
    //生成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 += '<div id="mb_msg"><img id="mb_warm" src="Public/img/warm.png"><div id="mb_msg_tip">亲！此时退出工作人员将无法联系到您领取实物奖品哦！</div><img  id="mb_error" src="Public/img/error.png"></div><div id="mb_btnbox">';

        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: '999999', width: '1100px', position: 'fixed',height:"571px",
            backgroundColor: 'white', borderRadius: '65px'
        });
        $("#mb_tit").css({ display: 'block', backgroundColor: 'red', borderRadius: '65px 65px 0 0',height:'111px'});

        $("#mb_msg").css({ height:'360px',width:'100%'});
        $("#mb_warm").css({marginTop:'68px',marginLeft:'83px',float:'left'});
        $("#mb_error").css({marginTop:'68px',marginRight:'75px',float:'right'});
        $("#mb_msg_tip").css({marginTop:'127px',marginLeft:'10px',float:'left',width:'450px',fontSize:'34px',fontFamily:"方正大黑简体",color:'#ff0000'});
        $("#mb_btnbox").css({ margin: '15px 0 0 0', textAlign: 'center' });
        $("#mb_btn_ok,#mb_btn_no").css({fontSize:'46px',width: '327px', height: '77px', color: '#fff', border: 'none',borderRadius:'65px',fontFamily:"黑体" ,outline:'none' });
        $("#mb_btn_ok").css({ backgroundColor: '#ff6262',marginLeft: '0px'});
        $("#mb_btn_no").css({ backgroundColor: '#ff6262',marginLeft: '46px'  });
        //右上角关闭按钮hover样式  
        $("#mb_ico").hover(function () {
            $(this).css({ backgroundColor: 'Red', color: 'White' });
        }, function () {
            $(this).css({ backgroundColor: '#DDD', color: 'black' });
        });
        var _width = document.documentElement.clientWidth;  //屏幕宽  
        var _height = document.documentElement.clientHeight; //屏幕高  
        var boxWidth = $("#mb_con").width();
        var boxHeight = $("#mb_con").height();
        //让提示框居中  
        $("#mb_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_width - 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 (callback1) {
        $("#mb_btn_no").click(function () {
            $("#mb_box,#mb_con").remove();
            if (typeof (callback1) == 'function') {
                callback1();
            }
        });
    };
    function onMouseOver() {
        $("#mb_btn_no").mouseover(function () {
            $("#mb_btn_no").css({ backgroundColor: '#ff6262' });
        });
        $("#mb_btn_no").mouseleave(function () {
            $("#mb_btn_no").css({ backgroundColor: 'red'});
        });
        $("#mb_btn_ok").mouseover(function () {
            $("#mb_btn_ok").css({ backgroundColor: '#ff6262' });
        });
        $("#mb_btn_ok").mouseleave(function () {
            $("#mb_btn_ok").css({ backgroundColor: 'red'});
        });
        $("#mb_btn_no").focus(function () {
            $("#mb_btn_no").css({ backgroundColor: 'red' });
        });
        $("#mb_btn_no").blur(function () {
            $("#mb_btn_no").css({ backgroundColor: '#ff6262'});
        });
        $("#mb_btn_ok").focus(function () {
            $("#mb_btn_ok").css({ backgroundColor: 'red' });
        });
        $("#mb_btn_ok").blur(function () {
            $("#mb_btn_ok").css({ backgroundColor: '#ff6262'});
        });
    };

})();