一个创建弹出式对话框的函数

最新推荐文章于 2024-08-18 18:30:07 发布

liuzhenwei

最新推荐文章于 2024-08-18 18:30:07 发布

阅读量2.2k

点赞数

分类专栏： JS 文章标签： null function ie callback float iframe

本文链接：https://blog.csdn.net/liuzhenwei/article/details/1715447

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

兼容ie5.5+, ff1+。兼容BackCompat模式。自带默认样式无需额外css样式，可使用自定义样式重定义默认样式，可定义的样式包括对话框、标题栏、对话框内容，（可使用样式子选择定义关闭按钮、标题文本样式）。可自定义callback函数。

<script type="text/javascript">
function msgbox(str,stitle,opt){
    var ie = /msie/i.test(navigator.userAgent);
    var cm = !(document.compatMode=='BackCompat');
    stitle = stitle || '';
    if (typeof(stitle)=='object') {
        opt = stitle;
        stitle = '';
    }
    opt = opt || {};
    opt.w = opt.w || 0;
    opt.h = opt.h || 0;
    opt.cls = opt.cls || 'msgbox_style';
    opt.clst = opt.clst || 'msgboxtitle_style';
    opt.clsc = opt.clsc || 'msgboxcont_style';
    opt.callback = opt.callback || function(){};
    var de = (cm && document.documentElement) || document.body;
    var bw = window.innerWidth || self.innerWidth || de.clientWidth;
    var bh = window.innerHeight || self.innerHeight || de.clientHeight;
    var bgw = (de.scrollWidth > de.offsetWidth ? de.scrollWidth : de.offsetWidth);
    var bgh = (de.scrollHeight > de.offsetHeight ? de.scrollHeight : de.offsetHeight);
    var sw = ie ? de.scrollLeft : 0;
    var sh = ie ? de.scrollTop : 0;
    de.style.overflow = 'hidden';

    if (ie) {
        var oBgf = document.createElement('iframe');
        oBgf.id = 'bgFrame';
        oBgf.border = '0';
        oBgf.style.position = 'absolute';
        oBgf.style.filter = 'Alpha(opacity=1)';
        oBgf.style.top = '0';
        oBgf.style.left = '0';
        oBgf.style.width = bgw + 'px';
        oBgf.style.height = bgh + 'px';
        oBgf.style.zIndex = '7897';
        document.body.appendChild(oBgf);
    }
    var oBg = document.createElement('div');
    oBg.id = 'bgDiv';
    oBg.style.position = 'absolute';
    oBg.style.background = '#888888';
    oBg.style.filter = 'Alpha(opacity=60)';
    oBg.style.opacity = '0.6';
    oBg.style.top = '0';
    oBg.style.left = '0';
    oBg.style.width = bgw + 'px';
    oBg.style.height = bgh + 'px';
    oBg.style.zIndex = '7898';
    document.body.appendChild(oBg);

    var oMsg = document.createElement('dl')
    oMsg.id = 'msgDL';
    oMsg.style.border = '4px solid #888888';
    oMsg.style.background = '#ffffff';
    oMsg.style.margin = '0';
    oMsg.style.padding = '0';
    oMsg.style.width = (opt.w>0) ? opt.w + 'px' : '400px';
    oMsg.style.height = (opt.h>0) ? opt.h + 'px' : '150px';
    oMsg.style.position = 'absolute';
    oMsg.style.zIndex = '7899';
    oMsg.className = opt.cls;
    document.body.appendChild(oMsg);

    oMsg.style.left = (bw-oMsg.offsetWidth)/2+sw + 'px';
    oMsg.style.top = (bh-oMsg.offsetHeight)/2+sh + 'px';
    var oTitle = document.createElement('dt');
    oTitle.id = 'msgTitle';
    oTitle.style.cursor = 'pointer';
    oTitle.style.background = '#CCCCCC';
    oTitle.style.fontSize = '14px';
    oTitle.style.color = '#333333';
    oTitle.style.margin = '0';
    oTitle.style.padding = '3px 3px 1px 3px';
    oTitle.style.overflow = 'hidden';
    oTitle.style.zoom = 1;
    oTitle.innerHTML = '<div id="msgTitleText" style="float:left;overflow:hidden;font-size:14px;color:#333333;"></div><span id="msgClose" style="float:right;">关闭</span>';
    oTitle.className = opt.clst;
    oMsg.appendChild(oTitle);

    var oTxt=document.createElement('dd');
    oTxt.id = 'msgTxt';
    oTxt.style.margin = '0';
    oTxt.innerHTML=str;
    oTxt.className = opt.clsc;
    oMsg.appendChild(oTxt);

    var oTitleTxt = document.getElementById('msgTitleText');
    oTitleTxt.innerHTML = stitle;

    var oClose = document.getElementById('msgClose');
    oClose.onclick = function(){
        if (typeof(opt.callback)=='function') opt.callback();
        oTitle.removeChild(oTitleTxt);
        oTitle.removeChild(oClose);
        oMsg.removeChild(oTxt);
        oMsg.removeChild(oTitle);
        document.body.removeChild(oMsg);
        document.body.removeChild(oBg);
        oTitleTxt = null;
        oClose = null;
        oTxt = null;
        oTitle = null;
        oMsg = null;
        oBg = null;
        if (ie) {
            document.body.removeChild(oBgf);
            oBgf = null;
        }
        de.style.overflow = '';
    }
}
</script>