免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 2078 | 回复: 0
打印 上一主题 下一主题

一个模拟弹出层的js代码 [复制链接]

论坛徽章:
0
跳转到指定楼层
1 [收藏(0)] [报告]
发表于 2008-04-03 11:25 |只看该作者 |倒序浏览

               
               
                var realAT =0;
window.onscroll = function(){
    /* 保存滚动条数据到全局 */
    realAT = document.documentElement.scrollTop || document.body.scrollTop;
}
/**
* @param title 窗口标题
* @param url 要加载的内容的URL地址,只限于本地调用
* @param callback 回调函数
* callback 如果有参数,则回以实际传回的DATA作为实参传递给 callback,但会受 tripScript
* 的影响,如果 tripScript 为真值,则data参数实际为被过滤标签后的代码.
* @param tipsScript 是否过滤标签
*/
function opendialog(title,url,callback,tripScript){
   
    /* 初始化屏幕窗口数据 */
    var aw = parseInt((window.screen.availWidth)/2);
    var ah = parseInt((window.screen.availHeight)/5);
    var tripScript = tripScript?(tripScript==0 || tripScript==false)?false:true:false;
    var startDrag = false;
    /******************************************************************************/
    var _callback = callback || function(){};
    /*****************************************************************************/
    var topFrame = document.getElementById('_coverDiv');
    if(topFrame){
        topFrame.parentNode.removeChild(topFrame);
    }
        var m = document.createElement('DIV');
        /* 遮罩层 */
        m.id = '_coverDiv';
        m.style.position='absolute';
        m.style.width = '101%';
        m.style.height = document.body.scrollHeight;
        m.style.filter="alpha(opacity=100)";
        m.style.opacity=100/100;
        m.style.MozOpacity=100/100;
        m.style.top='0px';
        m.style.left='0px';
        m.style.background='#181818';
        m.style.zIndex='9';
        
        /* 弹出层外框 */
        var d = document.createElement('DIV');
        d.id = '_mainDiv';
        d.style.position='absolute';
        d.style.zIndex='10';
        d.style.backgroundColor = '#ffffff';
        d.style.border = '1px solid #fff';
        d.style.top = '200px';
        d.style.left = '300px';
        
        /* 内边框 */
        var b = document.createElement('DIV');
        b.id = '_border';
        b.style.border = '1px solid #000';
        
        /* 标题栏 */
        var t = document.createElement('DIV');
        t.id = '_title';
        //t.style.width = '';
        //t.style.backgroundColor = 'none';
        t.style.fontWeight = 'bold';   
        t.style.color = 'black';
        t.style.cursor = 'pointer';
        t.style.margin = '0 13px';
        t.style.padding = '9px 0';
        t.style.borderBottom = '3px solid #F60';
        
        /* 拖拽实现    */
        t.onmousedown = function(e){
            startDrag = true;
            var drog = function(){};
            var event = e?e:window.event;
            drog.prototype.lp = event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
            drog.prototype.tp = event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
            drog.prototype.nl = parseInt(d.style.left);
            drog.prototype.nt = parseInt(d.style.top);
            document.onmousemove  = function(ee){
                if(startDrag == true){
                    event = ee?ee:window.event;
                    var x = event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
                    var y = event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
                    t.style.cursor = 'move';
                    d.style.left = drog.prototype.nl + x - drog.prototype.lp + 'px';
                    d.style.top = drog.prototype.nt + y - drog.prototype.tp + 'px';
                }
            };
            t.onmouseup = function(){
                        document.onmousemove = null;
                        t.style.cursor = 'pointer';
                        drog.prototype = null;
                        startDrag = false;
                        t.onmouseup = null;
                        event = null;
            };
        };
        /* 关闭按钮 */
        var bt = document.createElement('IMG');
        bt.id = 'closeBtn';
        bt.src = 'http://www.1x.cn/images/niceform/close.gif'
        bt.style.cursor = 'pointer';
        bt.style.right = '20px';
        bt.style.top = '15px';
        bt.style.position='absolute';
        bt.onclick = closedialog;
        var txt = document.createTextNode(title);
        
        /* 加载外部页面区域 */   
        var c = document.createElement('DIV');
        c.id = 'contentContainer';
        c.style.overflow = 'auto';
        c.style.height = '300px'
        c.style.margin = '8px 15px'
        
        /* 底部状态栏 */
        var s = document.createElement('DIV');
        s.id = '_bts';
        s.style.width = '100%';
        s.style.height = '1px';
        //s.style.backgroundColor = 'none';
        
        /* 追加层 */
        //s.appendChild(cbt);
        t.appendChild(txt);
        t.appendChild(bt);
        b.appendChild(t);
        /**初始化AJAX**/
        var _ajax =  window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
        
        var _self = this;
        var _activeCount = 0;
        function onReadyStatus(){
            var ready = _ajax.readyState;
            var data = null;
            if(ready==4 && _ajax.status==200){
                data = _ajax.responseText;
                if(tripScript==true)
                    data = filterStr(data);
                else
                    preExecuteScript(data);
                c.style.backgroundColor = '#fff';
                c.innerHTML = data;
                update();//重新构建DIV样式
                if((typeof _callback)=='function')
                    _callback.call(_self,data);
                _activeCount = 0;
            }else{
                data = "Loading...[" + ready + "]";
                c.innerHTML = data;
            }
               
        }
        if(_ajax){
            _ajax.onreadystatechange = onReadyStatus;
            /* 单实例Ajax运行 */
            if(_activeCount1)
            {
                try
                {
                    _ajax.open('GET',url,true);
                    _ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                    _ajax.send();
                    _activeCount = 1;
                }
                catch(e)
                {
                    alert(e);
                    //throw 'Error In Line 152....';
                }
            }
        }
        b.appendChild(c);
        b.appendChild(s);
        d.appendChild(b);
        m.appendChild(d);
               
        document.body.appendChild(m);
        /**
          * 处理被加载页面的JS
          */
        function executeScript(data)
        {
            if ( window.execScript )
                window.execScript( data );
            else
                eval.call( window, data );
        }
        /**
          * 预选处理被加载页面的JS
          */
        function preExecuteScript(data)
        {
            //查找页面上的JS
            var js = findJavaScript(data);
            executeScript(js);
        }
        /* 查找页面上的JS代码 */
        function findJavaScript(data)
        {
            var js = '';
            var regStr = new RegExp('(?:)((\n|\r|.)*?)(?:)', 'img')
            var result = data.match(regStr);
            for(var i=0;iresult.length;i++)
            {
                js += result.replace(/\/?script.*?>/img,'');
            }
            return js;
        }
        /* 过滤JS代码 */
        function filterStr(str)
        {
            var regStr = new RegExp('(?:)((\n|\r|.)*?)(?:)', 'img')
            return str.replace(regStr,'') || 'No Data Return';
        }
        function update(){
            /* 获取加载页面的宽及高 */
            try{
                var rw = parseInt(c.childNodes[0].style.width) || c.clientWidth || c.offsetWidth;
                var rh = parseInt(c.childNodes[0].style.height) || c.clientHeight || c.offsetHeight;
            }catch(e){
                var rw = 100;
                var rh = 100;
            }
                /* 重置外框宽及高 */
                b.style.width = rw + 7 + 'px';
                //b.style.height = rh + 7 + 'px';
               
                /* 重置外边框的坐标 */
                var ot = ah + realAT;
                var ol = aw - rw/2;
                d.style.top = ot + 'px';
                d.style.left = ol + 'px';
        }
}
function closedialog(){
    if(document.getElementById('_coverDiv')){
        document.getElementById('_coverDiv').style.display = 'none';
    }
}


本文来自ChinaUnix博客,如果查看原文请点:http://blog.chinaunix.net/u/8660/showart_516082.html
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP