下面是本人不结合任何框架,实现一个简单的弹出框程序:
var dragobj;
var relLeft;
var relTop;
var showDivW=440;
var showDivH=240;
//获取div的对象
function getObj(divId){
var obj = document.getElementById(divId);
return obj;
}
//下面是一个判断浏览器是否是IE
function isIE(){
return (document.all && window.ActiveXObject && !window.opera) ? true : false;
}
//下面方法用于创建一个覆盖层
function creatDiv(divId){
return document.createElement(divId);
}
//下面用于取得页面高与宽
function getBodySize(){
var bodySize=[];
with(document.documentElement){
bodySize[0]=(scrollWidth>clientWidth)?scrollWidth:clientWidth;
bodySize[1]=(scrollHeight>clientHeight)?scrollHeight:clientHeight;
}
return bodySize;
}
//下面这个方法用于改变弹出的div层的位置与大小
function changeDiv(i){
var showDiv = getObj("dialogDiv");
var bodySize = getBodySize();
showDiv.style.left=(bodySize[0]-i*i*4)/2+"px";
showDiv.style.top=(bodySize[1]-i*i*4)/2+"px";
showDiv.style.width=i*i*4+"px";
showDiv.style.height=i*i*1.5+"px";
if(i<10){
i++;
setTimeout("changeDiv("+i+")",10);
}else{
showDiv.style.left=(bodySize[0]-showDivW)/2+"px";
showDiv.style.top=(bodySize[1]-showDivH)/2+"px";
showDiv.style.width=showDivW+"px";
showDiv.style.height=showDivH+"px";
}
}
//下面用于显示带有样式的div
function displayDiv(){
var mainDiv = getObj("dialogDiv");
mainDiv.style.position = "absolute";
mainDiv.style.border = "1px solid #CCCCCC";
mainDiv.style.background ="#BFEFFF";
mainDiv.style.display="block";
var i=0;
changeDiv(i);
}
//当层显示出来的时候覆盖下面层
function popCoverDiv(){
if(getObj("cover_div")){
getObj("cover_div").style.display="block";
}else{
var coverDiv = creatDiv("div");
document.body.appendChild(coverDiv);
coverDiv.id="cover_div";
with(coverDiv.style){
position="absolute";
background="#8B5F65";
left="0px";
top="0px";
var bodySize=getBodySize();
width=bodySize[0]+"px";
height=bodySize[1]+"px";
zIndex=0;
if(isIE()){
filter="Alpha(Opacity=70)";
}
}
}
}
//给div注册拖拽函数
window.οnlοad=function(){
var mainDiv = getObj("dragDiv");
mainDiv.οnmοusedοwn=function(e){
e=e||event;
dragobj=this.parentNode;
dragobj.style.position="absolute";
relLeft =e.clientX - dragobj.style.pixelLeft;
relTop =e.clientY-dragobj.style.pixelTop;
dragobj.style.filter = "Alpha(opacity=60)";
};
mainDiv.οnmοusemοve=function(e){
e=e||event;
if(dragobj!=null){
dragobj.style.pixelLeft=e.clientX-relLeft;
dragobj.style.pixelTop=e.clientY-relTop;
}
}
mainDiv.οnmοuseup=function(e){
e=e||event;
dragobj=this.parentNode;
dragobj.style.filter="Alpha(apacity=100)";
dragobj=null;
}
}
function show(){
displayDiv();
popCoverDiv();
}