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

兼容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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值