/*弹出时给body加上这个,关闭时去掉*/.overhide {    overflow: hidden;}/*关键样式 遮罩层的*/.msgboxshadow {    position: fixed; /*固定定位*/    left: 0;    top: 0;    right: 0;    bottom: 0;    opacity: .5; /*背景透明度.这里没有兼容样式*/    background-color: #000; /*背景色*/    z-index: 10000; /*层级数仅小于内容弹出框*/}/*关键样式 弹出框最外层*/.msgboxbg {    display: none;    position: fixed; /*固定定位*/    left: 0;    top: 0;    right: 0;    bottom: 0;    overflow-x: hidden;    overflow-y: auto;    z-index: 10001; /*比遮罩层大1,要显示在遮罩层上面*/}/*内容层默认样式*/.msgboxcontent {    position: relative;    border-radius: 5px;    background-color: #fff;    box-shadow: 2px 2px 40px #000000;    margin: 30px auto 0 auto;    width:250px;    height:150px;    overflow:auto;    text-indent:10px;    padding-top:5px;}

/*--msgbox函数对象,相当于弄了一个类,方法都在这个函数(类)上,是"静态"的--*/function msgBox(){}/*****************************************//*******************  PROPERTY     ******//****************************************/// public 按ESC关闭? 否置false(bool) msgBox.ESCclose = true;// public 点击背景关闭?(bool)msgBox.Bgclose = true;// public 弹出层关闭之后事执行msgBox.closedEvent = null;// public 确定按钮 [role = btnok]msgBox.okEvent = null;// public 取消(关闭)按钮 [role = btncancel]msgBox.cancelEvent = null;// 当前弹出层元素的ID(string)msgBox.CurrentDomId = null;// 当前弹出层元素的JQERY对象msgBox.CurrentDomJqObj = null;/******************************************//******************* FUNCTION     *******//*****************************************/// 显示弹出层(主要方法) domid=弹出层DOM的id , cfg=配置JSONmsgBox.show = function (domid, cfg){    // 当前要弹出的层的ID(这两个属性要最后才重置)    msgBox.CurrentDomId = domid;    msgBox.CurrentDomJqObj = $(‘#‘ + domid);    // 将配置设置到属性    msgBox.config(cfg);    // window的宽度与高度    //var windowWidth = window.innerWidth;    //var windowHeight = window.innerHeight;    // 文档宽度与高度    //var scrollTop = $(document).scrollTop();    //var scrollLeft = $(document).scrollLeft();    // 先将body的滚动条设无,这样遮罩范围就限于当前窗口大小.遮罩和弹出层还须是固定定位    $(‘body‘).addClass(‘overhide‘);    // 加入遮罩层    $(‘body .msgboxshadow‘).remove();    $(‘body‘).append(‘<div class="msgboxshadow"></div>‘);    // 要获得焦点,需要设定这个属性tabindex    msgBox.CurrentDomJqObj.attr(‘tabindex‘, -1);    // 显示内容层    msgBox.CurrentDomJqObj.show().focus();}// 用于配置属性的方法,参数是JSON对象 传入 def 则恢复到默认配置msgBox.config = function (cfg){    msgBox.reset();    if (cfg) {        // 属性设定        for (var n in cfg) {            if (msgBox[n] !== undefined)                msgBox[n] = cfg[n];        }    }     // 事件绑定    msgBox.bindEvent();}// 将属性重置,将事件清空.但不清除当前弹出层JQ对象 不应在外部调用此法 关闭时会调用此方法msgBox.reset = function (){    msgBox.ESCclose = true; // 按ESC关闭    msgBox.Bgclose = true; // 点击背景关闭    msgBox.closedEvent = null; // 窗口关闭后执行    msgBox.okEvent = null;   // 确定按钮 [role = btnok]    msgBox.cancelEvent = null;// 取消(关闭)按钮 [role = btncancel]    // event    msgBox.CurrentDomJqObj.off(‘keyup click‘);    msgBox.CurrentDomJqObj.find("[role = btnok]").off(‘click‘);    msgBox.CurrentDomJqObj.find("[role = btncancel]").off(‘click‘);}// 该方法用于绑定事件:有默认事件如: 按ESC关闭,点击背景关闭.也有指定的事件,如确定 取消// 不应在外部调用此方法,所有属性和事件应在CFG方法中传入,CFG会调用此方法msgBox.bindEvent = function (){    // 默认事件绑定 按ESC关闭,点击关闭    if (msgBox.ESCclose === true) {        msgBox.CurrentDomJqObj.on("keyup", function (event)        {            // 只在这个元素上触发            if (event.target.id === msgBox.CurrentDomId) {                var keycode = event.which;                if (keycode === 27)                    msgBox.close();            }        })    }    // 默认事件绑定 点击背景关闭    if (msgBox.Bgclose === true)        msgBox.CurrentDomJqObj.on(‘click‘, function (event)        {            if (event.target.id === msgBox.CurrentDomId) {                msgBox.close();            }        });    // 事件 但role约定为btnok(确定) btncancel(取消)    if (typeof msgBox.okEvent === ‘function‘)        msgBox.CurrentDomJqObj.find("[role = btnok]").on("click", function ()        {            msgBox.okEvent();        })    if (typeof msgBox.cancelEvent === ‘function‘)        msgBox.CurrentDomJqObj.find("[role = btncancel]").on("click", function ()        {            msgBox.cancelEvent(); msgBox.close();        })}// 关闭对话框msgBox.close = function (){    // 还原文档的滚动条,清除遮罩层    $(‘body‘).removeClass(‘overhide‘);    $(‘body .msgboxshadow‘).remove();    // 隐藏弹出层    msgBox.CurrentDomJqObj.hide();    // 执行关闭后事件    if (typeof msgBox.closedEvent === ‘function‘)        msgBox.closedEvent();    // 重置弹出层    msgBox.reset();    // 当前弹出层ID和jquery引用销毁    msgBox.CurrentDomId = null;    msgBox.CurrentDomJqObj = null;}

这个是仿制的BOOTSTRAP的弹出框

按ESC可关闭

点击背景也可以关闭