仿Window.alert()效果的自定义弹出层效果

CSS：样式

.box_table{    border-collapse: collapse;    border-spacing: 0;}.box_t_l{ width:6px; height:6px; background-image:url(../images/orange/box_t_l.png);_background-image:none;    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/orange/box_t_l.png', sizingMethod='scale');} .box_tb_bg{ width:auto;height:6px; background-image:url(../images/orange/box_bg.png);_background-image:none;    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/orange/box_bg.png', sizingMethod='scale');} .box_t_r{ width:6px; height:6px;background-image:url(../images/orange/box_t_r.png);_background-image:none;    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/orange/box_t_r.png', sizingMethod='scale');} .box_c_bg{width:6px; background-image:url(../images/orange/box_bg.png);_background-image:none;    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/orange/box_bg.png', sizingMethod='scale');} .box_h,.box_h2{ height:32px; line-height:32px; background-color:#fff7ea; border-bottom:1px #ffe7c3 solid; color:#333; font-weight:bold; font-size:13px; padding-left:15px;position:relative}.box_h2{ border-bottom:0;}.box_close{ width:10px; height:10px; position:absolute; right:15px; top:10px; cursor:pointer}.h_r_t_bg2{ height:auto; padding-bottom:10px;}.c_btn a{width:59px; height:23px;line-height:23px; display:inline-block; background:url(../images/orange/c_btn.gif) no-repeat; text-align:center; color:#3e3e3e; cursor:pointer;} .clear{clear:both;}.ml10{ margin-left:10px;}.box_b_l{ width:6px; height:6px;background-image:url(../images/orange/box_b_l.png);_background-image:none;    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/orange/box_b_l.png', sizingMethod='scale');}.box_b_r{ width:6px; height:6px; background-image:url(../images/orange/box_b_r.png);_background-image:none;    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/orange/box_b_r.png', sizingMethod='scale');} .msg_main{    font-weight: normal;    height: auto;    border: 1px #c7c7c7 solid;    position: relative;    background-color: #fff;} .msg_tb{    width: 100%;    height: 100%;}.align_btn{    margin: 20px 10px 10px 0;    display: inline;}.f_right{    float: right;    margin-right: 5px;    position: relative;}

JavaScript:

  /*    本Js代码用于创建一个自定义的确认窗口,    具体功能包括:自定义窗口标题,自定义窗口内容,是否显示取消按钮,焦点位置设定    */    var windows_fun;    var windows_alert_fun;    function get_width() {        return (document.body.clientWidth + document.body.scrollLeft);    }    function get_height() {        return (document.body.clientHeight + document.body.scrollTop);    }    function get_left(w) {        var bw = document.body.clientWidth;        var bh = document.body.clientHeight;        w = parseFloat(w);        return (bw / 2 - w / 2 + document.body.scrollLeft);    }    function get_top(h) {        var bw = document.body.clientWidth;        var bh = window.screen.availHeight;        h = parseFloat(h);        return (bh / 2 - h / 2 + document.body.scrollTop);    }    function create_mask() {//创建遮罩层的函数        var mask = document.createElement("div");        mask.id = "mask";        mask.style.position = "absolute";        mask.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=5)"; //IE的不透明设置        mask.style.opacity = 0.1; //Mozilla的不透明设置        mask.style.background = "black";        mask.style.top = "0px";        mask.style.left = "0px";        mask.style.width = get_width();        mask.style.height = get_height();        mask.style.zIndex = 1000;        document.body.appendChild(mask);    }    function create_msgbox(w, h, t) {//创建弹出对话框的函数        var box = document.createElement("div");        box.id = "msgbox";        box.style.position = "absolute";        box.style.width = w + "px";         box.style.height = h + "px";         box.style.left = "50%";        box.style.top = "50%";        box.style.overflow = "visible";        box.innerHTML = t;        box.style.zIndex = 1001;        document.body.appendChild(box);        re_pos();    }    function re_mask() {        /*        更改遮罩层的大小,确保在滚动以及窗口大小改变时还可以覆盖所有的内容        */        var mask = document.getElementById("mask");        if (null == mask) return;        mask.style.width = get_width() + "px";        mask.style.height = get_height() + "px";    }    function re_pos() {        /*        更改弹出对话框层的位置,确保在滚动以及窗口大小改变时一直保持在网页的最中间        */        var box = document.getElementById("msgbox");        if (null != box) {            var w = box.style.width;            var h = box.style.height;            box.style.left = get_left(w) + "px";            box.style.top = get_top(h) + "px";        }    }    function remove() {        /*        清除遮罩层以及弹出的对话框         */        var mask = document.getElementById("mask");        var msgbox = document.getElementById("msgbox");        if (null == mask && null == msgbox) return;        document.body.removeChild(mask);        document.body.removeChild(msgbox);    }    function msgbox(title, text, func) {        /*          参数列表说明:        title :弹出对话框的标题,标题内容最好在25个字符内,否则会导致显示图片的异常                       text :弹出对话框的内容,可以使用HTML代码,例如<font color='red'>删除么?</font>,如果直接带入函数,注意转义        func :弹出对话框点击确认后执行的函数,需要写全函数的引用,例如add(),如果直接带入函数,注意转义。         cancel:弹出对话框是否显示取消按钮,为空的话不显示,为1时显示         focus :弹出对话框焦点的位置,0焦点在确认按钮上,1在取消按钮上,为空时默认在确认按钮上         */        remove();        windows_fun = func;        create_mask();        var temp = "";        temp += '<table border="0" cellpadding="0" cellspacing="0" class="box_table msg_tb">' +  '<tr>' +'<td class="box_t_l"></td>' +'<td class="box_tb_bg"></td>' +'<td class="box_t_r"></td>' + ' </tr>' +  '<tr>' +'<td class="box_c_bg"></td>' +'<td>' +'<div class="msg_main">' +'<div class="box_h2">' + title +    '<div class="box_close"><img src="../images/orange/w_close.gif" width="11" height="11" onclick="remove();" /></div>' +    '</div>' +            '<div class="h_r_t_bg2">' +'<div class="" style="padding:15px 0px 10px 15px;line-height:20px;">' +    text +'</div>' +'<div class="align_btn" style="padding:5px 0px 10px 0px;"><span class="c_btn ml10 f_right" id="msgcancelb"><a href="javascript:remove();">取消</a></span><span class="c_btn ml10 f_right" id="msgconfirmb"><a href="javascript:remove();windows_fun(\'yes\');">确定</a></span></div>' +'<div class="clear"></div>' + ' </div>' +'</div>' +'</td>' +'<td class="box_c_bg"></td>' +  '</tr>' + ' <tr>' +'<td class="box_b_l"></td>' +'<td class="box_tb_bg"></td>' +'<td class="box_b_r"></td>' +  '</tr>' +'</table>';        create_msgbox(300, 100, temp);    }    function chkmsgbox(title, text, func) {        remove();        windows_fun = func;        create_mask();        var temp = "";        temp += '<table border="0" cellpadding="0" cellspacing="0" class="box_table msg_tb">' +  '<tr>' +'<td class="box_t_l"></td>' +'<td class="box_tb_bg"></td>' +'<td class="box_t_r"></td>' + ' </tr>' +  '<tr>' +'<td class="box_c_bg"></td>' +'<td>' +'<div class="msg_main">' +'<div class="box_h2">' + title +    '<div class="box_close"><img src="../images/orange/w_close.gif" width="11" height="11" onclick="remove();" /></div>' +    '</div>' +            '<div class="h_r_t_bg2">' +'<div class="" style="padding:15px 0px 10px 15px;line-height:20px;">' +    text +'</div>' +'<div class="align_btn" style="padding:5px 0px 10px 0px;"><span class="c_btn ml10 f_right" id="msgcancelb"><a href="javascript:remove();">取消</a></span><span class="c_btn ml10 f_right" id="msgconfirmb"><a href="javascript:windows_fun(\'yes\');">确定</a></span></div>' +'<div class="clear"></div>' + ' </div>' +'</div>' +'</td>' +'<td class="box_c_bg"></td>' +  '</tr>' + ' <tr>' +'<td class="box_b_l"></td>' +'<td class="box_tb_bg"></td>' +'<td class="box_b_r"></td>' +  '</tr>' +'</table>';        create_msgbox(300, 100, temp);    }    function re_show() {        /*        重新显示遮罩层以及弹出窗口元素         */        re_pos();        re_mask();    }    function load_func() {        /*        加载函数,覆盖window的onresize和onscroll函数        */        window.onresize = re_show;        window.onscroll = re_show;    }    //信息    function windowsAlert(title, text, func) {        /*          参数列表说明:        title :弹出对话框的标题,标题内容最好在25个字符内,否则会导致显示图片的异常                       text :弹出对话框的内容,可以使用HTML代码,例如<font color='red'>删除么?</font>,如果直接带入函数,注意转义        func :弹出对话框点击确认后执行的函数,需要写全函数的引用,例如add(),如果直接带入函数,注意转义。         cancel:弹出对话框是否显示取消按钮,为空的话不显示,为1时显示         focus :弹出对话框焦点的位置,0焦点在确认按钮上,1在取消按钮上,为空时默认在确认按钮上        */        remove();        var runFun = '';        if (func != undefined) {            windows_alert_fun = func;            runFun = 'windows_alert_fun();';        }        create_mask();        var temp = "";        temp += '<table border="0" cellpadding="0" cellspacing="0" class="box_table msg_tb">' +  '<tr>' +'<td class="box_t_l"></td>' +'<td class="box_tb_bg"></td>' +'<td class="box_t_r"></td>' + ' </tr>' +  '<tr>' +'<td class="box_c_bg"></td>' +'<td>' +'<div class="msg_main">' +'<div class="box_h2">' + title +    '<div class="box_close"><img src="../images/orange/w_close.gif" width="11" height="11" onclick="remove();' + runFun + '" /></div>' +    '</div>' +            '<div class="h_r_t_bg2">' +'<div class="" style="padding:15px 0px 10px 15px;line-height:20px;">' +    text +'</div>' +'<div class="align_btn" style="padding:105px 0px 15px 15px;"><span class="f_right c_btn ml10" id="msgconfirmb"><a href="javascript:remove();' + runFun + '">确定</a></span>' +'<div class="clear"></div>' + ' </div>' +'</div>' +'</td>' +'<td class="box_c_bg"></td>' +  '</tr>' + ' <tr>' +'<td class="box_b_l"></td>' +'<td class="box_tb_bg"></td>' +'<td class="box_b_r"></td>' +  '</tr>' +'</table>';        create_msgbox(300, 100, temp);    }    function re_pos_byElementId(elementId) {        /*        更改弹出对话框层的位置,确保在滚动以及窗口大小改变时一直保持在网页的最中间        */        var box = document.getElementById(elementId);        if (null != box) {            var w = box.style.width;            var h = box.style.height;            box.style.left = get_left(w) + "px";            if (h != "") {                box.style.top = get_top(h) + "px";            }            else {                //box.style.top = "250px";                box.style.top = get_top(box.clientHeight) + "px";            }        }    }    function mousePosition(e) {        if (e.pageX || e.pageY) {            return { x: e.pageX, y: e.pageY };        }        return {            x: e.clientX + document.body.scrollLeft - document.body.clientLeft,            y: e.clientY + document.body.scrollTop - document.body.clientTop        };    }    function mouseMove(ev) {        ev = ev || window.event;        var mousePos = mousePosition(ev);        var width = parseInt(String(document.getElementById('div1').style.width).substring(0, String(document.getElementById('div1').style.width).indexOf('px')));        var height = parseInt(String(document.getElementById('div1').style.height).substring(0, String(document.getElementById('div1').style.height).indexOf('px')));        if ((mousePos.x + width) > document.body.offsetWidth) {            document.getElementById('div1').style.left = (mousePos.x - width) + 'px';        }        else {            document.getElementById('div1').style.left = mousePos.x + 'px';        }        if ((mousePos.y + height) > document.body.scrollHeight) {            document.getElementById('div1').style.top = (mousePos.y - height) + 'px';        }        else {            document.getElementById('div1').style.top = mousePos.y + 'px';        }    }

    用法：$(document).ready(function(){

 

 load_func();WindowsAlert("确认窗口","确定要删除吗？",func_ok,1);

});