一个模拟弹出层的js代码
时间：2008-04-03 来源：carset
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';
}
}
相关阅读 更多 +
