【转】用DIV实现弹出窗口

最新推荐文章于 2022-09-08 15:36:15 发布

Gambler

最新推荐文章于 2022-09-08 15:36:15 发布

阅读量1.3k

点赞数

分类专栏： web 设计文章标签： div function float border html website

web 设计专栏收录该内容

12 篇文章

订阅专栏

* 创建弹出div窗口。
     1、接口说明：DivWindow(id,title,width,height,content) 构造函数，创建一个弹出窗口对象
      参数：id 弹出窗口id；
         title：弹出窗口标题名称；
      width：弹出窗口宽度
      height：弹出窗口高度
      content：弹出窗口显示内容

2、接口说明： closeDivWindow(id) 关闭窗口
      参数： id 弹出窗口id

3、接口说明：setPopupTopTitleFontColor(PopupTopTitleFontColor) 设置弹出窗口标题字体颜色
         参数：

     4、接口说明：setPopupTopBgColor(tBgColor) 设置弹出窗口标题背景颜色

5、接口说明：setPopupColor(borderColor,bgColor,tFontColor,cBgColor,fColor) 设置弹出窗口风格,包括标题栏的背景，弹出窗口边框颜色，内容窗体背景颜色，内容窗体字体颜色

6、接口说明：open()

使用方法：
      var a = new DivWindow("1","窗口测试",580,400,"Welcome to visited my personal website:<br><a href=http://www.youthfly.net target=_blank>http://www.youthfly.net</a><br><ahref=http://www ... youthfly.net</a><br><br>thx!!!=)..."L);
      a.setPopupTopBgColor("black","blue","white","white","black");
    a.open();

生成的html：
<div id='"window"+id'></div> 控制背景的div，使背景逐渐变暗
     <div id='"windowTopBg"+id'>
    <div id='"windowTop"+id'>
      <span id='"windowTopTitle"+id'>title</span>
    <span id='"windowTopOperate"+id'>maxORmin</span>
    <span id='"windowTopClose"+id'>close</span>
    </div>
    <div id='"windowContent"+id'>content</div>
</div>

@author Nieger Dai
@date 2007.11.15
*/

var isIe = (document.all)?true:false;
var moveable=false;
var topDivBorderColor = "#336699";//提示窗口的边框颜色
var topDivBgColor = "#6795B4";//提示窗口的标题的背景颜色
var contentBgColor = "white";//内容显示窗口的背景颜色
var contentFontColor = "black";//内容显示窗口字体颜色
var titleFontColor = "white"; //弹出窗口标题字体颜色
var index=10000;//z-index;
// 创建弹出窗口，构造函数
function DivWindow(id,title,w,h,content)
{
this.id = id;//窗口id
this.zIndex = index +2;
this.title = title;//弹出窗口名称
this.message = content;//弹出窗口内容
this.width = w;//弹出窗口宽度
this.height = h;//弹出窗口高度
this.left = (document.body.clientWidth) ? (document.body.clientWidth - this.width)/2 : 0;//弹出窗口位置，距屏幕左边的位置
this.top = (document.body.clientHeight) ? (document.body.clientHeight - this.height)/2 : 0;//弹出窗口位置，距屏幕上边的位置
//this.init = init;
//this.init();
}
//根据构造函数设定初始值，创建弹出窗口
DivWindow.prototype = {
//设置弹出窗口标题字体颜色
setPopupTopTitleFontColor:function(tFontColor)
{
     titleFontColor = tFontColor;
},
//设置弹出窗口标题背景颜色
setPopupTopBgColor:function(tBgColor)
{
     topDivBgColor = tBgColor;
},
//设置弹出窗口风格,包括标题栏的背景，弹出窗口边框颜色，内容窗体背景颜色，内容窗体字体颜色
setPopupColor:function(borderColor,bgColor,tFontColor,cBgColor,fColor)
{
      topDivBorderColor = borderColor;
topDivBgColor = bgColor;
titleFontColor = tFontColor;
contentBgColor = cBgColor;
      contentFontColor = fColor;
},
//打开一个弹出窗口
open: function()
{
    var sWidth,sHeight;
    sWidth=document.body.clientWidth;
    sHeight=document.body.clientHeight;
    var bgObj=document.createElement("div");
    bgObj.setAttribute('id','window'+this.id);
    var styleStr="top:0px;left:0px;position:absolute;background:#245;width:"+sWidth+"px;height:"+sHeight+"px;";
     styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";
    bgObj.style.cssText=styleStr;
    document.body.appendChild(bgObj);
    //让背景逐渐变暗
    showBackground(bgObj,25);

    // 弹出窗口框体背景容器
    var windowTopBgDiv = document.createElement("div");
    windowTopBgDiv.setAttribute('id','windowTopBg'+this.id);
    windowTopBgDiv.style.position = "absolute";
    windowTopBgDiv.style.zIndex = this.zIndex ;
    windowTopBgDiv.style.width = this.width ;
    windowTopBgDiv.style.height = this.height;
    windowTopBgDiv.style.left = this.left;
    windowTopBgDiv.style.top = this.top;
    windowTopBgDiv.style.background = topDivBgColor;
    windowTopBgDiv.style.fontSize = "9pt";
    windowTopBgDiv.style.cursor = "default";
    windowTopBgDiv.style.border = "1px solid " + topDivBorderColor;
    windowTopBgDiv.attachEvent("onmousedown",function(){
    if(windowTopBgDiv.style.zIndex!=index)
    {
    index = index + 2;
    var idx = index;
    windowTopBgDiv.style.zIndex=idx;
    }
    });
    // 弹出窗口头部框体
    var windowTopDiv = document.createElement("div");
    windowTopDiv.setAttribute('id','windowTop'+this.id);
    windowTopDiv.style.position = "absolute";
    windowTopDiv.style.background = topDivBgColor;//"white";
    windowTopDiv.style.color = titleFontColor;
    windowTopDiv.style.cursor = "move";
    windowTopDiv.style.height = 20;
    windowTopDiv.style.width = this.width-2*2;
    //开始拖动;
    windowTopDiv.attachEvent("onmousedown",function(){
    if(event.button==1)
    {
     //锁定标题栏;
     windowTopDiv.setCapture();
     //定义对象;
     var win = windowTopDiv.parentNode;
     //记录鼠标和层位置;
     x0 = event.clientX;
     y0 = event.clientY;
     x1 = parseInt(win.style.left);
     y1 = parseInt(win.style.top);
     //记录颜色;
     //topDivBgColor = windowTopDiv.style.backgroundColor;
     //改变风格;
     //windowTopDiv.style.backgroundColor = topDivBorderColor;
     win.style.borderColor = topDivBorderColor;
     moveable = true;
    }
    });
    //停止拖动
    windowTopDiv.attachEvent("onmouseup",function(){
    if(moveable)
    {
     var win = windowTopDiv.parentNode;
     win.style.borderColor = topDivBgColor;
     windowTopDiv.style.backgroundColor = topDivBgColor;
     windowTopDiv.releaseCapture();
     moveable = false;
    }
    });
    // 开始拖动
    windowTopDiv.attachEvent("onmousemove",function(){
    if(moveable)
    {
     var win = windowTopDiv.parentNode;
     win.style.left = x1 + event.clientX - x0;
     win.style.top = y1 + event.clientY - y0;
    }
    });
    // 双击弹出窗口
    windowTopDiv.attachEvent("ondblclick",function(){
    maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv);
    });

    //增加一个弹出窗口标题的显示
    var windowTopTitleSpan = document.createElement("span");
    windowTopTitleSpan.setAttribute('id','windowTopTitle'+this.id);
    windowTopTitleSpan.style.width = this.width-2*12-4;
    windowTopTitleSpan.style.paddingLeft = "3px";
    windowTopTitleSpan.innerHTML = this.title;

    //增加一个弹出窗口最小化，最大化的操作
    var windowTopOperateSpan = document.createElement("span");
    windowTopOperateSpan.setAttribute('id','windowTopOperate'+this.id);
    windowTopOperateSpan.style.width = 12;
    windowTopOperateSpan.style.borderWidth = "0px";
    windowTopOperateSpan.style.color = titleFontColor;//"white";
    windowTopOperateSpan.style.fontFamily = "webdings";
    windowTopOperateSpan.style.cursor = "default";
    windowTopOperateSpan.innerHTML = "0";
    //最大化或者最小化弹出窗口操作
    windowTopOperateSpan.attachEvent("onclick",function(){
     maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv);
    });

    //增加一个弹出窗口关闭的操作
    var windowTopCloseSpan = document.createElement("span");
    windowTopCloseSpan.setAttribute('id','windowTopClose'+this.id);
    windowTopCloseSpan.style.width = 12;
    windowTopCloseSpan.style.borderWidth = "0px";
    windowTopCloseSpan.style.color = titleFontColor;//"white";
    windowTopCloseSpan.style.fontFamily = "webdings";
    windowTopCloseSpan.style.cursor = "default";
    windowTopCloseSpan.innerHTML = "r";
    // 关闭窗口
    windowTopCloseSpan.attachEvent("onclick",function(){
    windowTopDiv.removeChild(windowTopTitleSpan);
    windowTopDiv.removeChild(windowTopOperateSpan);
    windowTopDiv.removeChild(windowTopCloseSpan);
    windowTopBgDiv.removeChild(windowTopDiv);
    windowTopBgDiv.removeChild(windowContentDiv);
    document.body.removeChild(windowTopBgDiv);
    document.body.removeChild(bgObj);
    });

    // 内容
var windowContentDiv = document.createElement("div");
    windowContentDiv.setAttribute('id','windowContent'+this.id);
    windowContentDiv.style.background = contentBgColor;
    windowContentDiv.style.color = contentFontColor;
    windowContentDiv.style.cursor = "default";
    windowContentDiv.style.height = (this.height - 20 - 4);
    windowContentDiv.style.width = "100%";
    windowContentDiv.style.position = "relative";
    windowContentDiv.style.left = 0;
    windowContentDiv.style.top = 24;

    windowContentDiv.style.lineHeight = "20px";
    windowContentDiv.style.fontSize = "10pt";
    windowContentDiv.style.wordBreak = "break-all";
    windowContentDiv.style.padding = "3px";
    windowContentDiv.innerHTML = this.message;

    //将内容写入到文件中
    windowTopDiv.appendChild(windowTopTitleSpan);
    windowTopDiv.appendChild(windowTopOperateSpan);
    windowTopDiv.appendChild(windowTopCloseSpan);
    windowTopBgDiv.appendChild(windowTopDiv);
    windowTopBgDiv.appendChild(windowContentDiv);
    document.body.appendChild(windowTopBgDiv);
}
}

//最大或者最小化探出窗口
function maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv)
{
     var win = windowTopOperateSpan.parentNode.parentNode;
var tit = windowTopOperateSpan.parentNode;
var flg = windowContentDiv.style.display=="none";
if(flg)
{
    win.style.height = parseInt(windowContentDiv.style.height) + parseInt(tit.style.height) + 2*2;
    windowContentDiv.style.display = "block";
    windowTopOperateSpan.innerHTML = "0";
}
else
{
    win.style.height = parseInt(tit.style.height) + 2*2;
    windowTopOperateSpan.innerHTML = "2";
    windowContentDiv.style.display = "none";
}
}
//让背景渐渐变暗
function showBackground(obj,endInt)
{
    if(isIe)
    {
    obj.filters.alpha.opacity+=1;
    if(obj.filters.alpha.opacity<endInt)
    {
    setTimeout(function(){this.showBackground(obj,endInt)},5);
    }
}
else
{
    var al=parseFloat(obj.style.opacity);al+=0.01;
    obj.style.opacity=al;
    if(al<(endInt/100))
    {
       setTimeout(function(){this.showBackground(obj,endInt)},5);
    }
}
}
//关闭弹出窗口
function closeDivWindow(id)
{
var windowTopTitleSpan = document.getElementById("windowTopTitle"+id);
var windowTopOperateSpan = document.getElementById("windowTopOperate"+id);
var windowTopCloseSpan = document.getElementById("windowTopClose"+id);
var windowTopDiv = document.getElementById("windowTop"+id);
var windowTopBgDiv = document.getElementById("windowTopBg"+id);
var windowContentDiv = document.getElementById("windowContent"+id);
var bgObj = document.getElementById("window"+id);

windowTopDiv.removeChild(windowTopTitleSpan);
windowTopDiv.removeChild(windowTopOperateSpan);
windowTopDiv.removeChild(windowTopCloseSpan);
windowTopBgDiv.removeChild(windowTopDiv);
windowTopBgDiv.removeChild(windowContentDiv);
document.body.removeChild(windowTopBgDiv);
document.body.removeChild(bgObj);
}

（js实现弹出div层窗口）

直接复制下面的内容，保存为html格式即可：

<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>MyHtml.html</title>

<metahttp-equiv="content-type" content="text/html;charset=UTF-8">

<style>

/**

* 弹出层css

.pop {

width: 80%;

border: 1px#96D1DF solid;

background:#fff;

padding:1px;

color:#333;

position:absolute;

top: 15%;

left: 15%;

height:auto;

z-index: 10

}

/**

* 弹出层css

.pop_ {

width: 80%;

border: 1px#96D1DF solid;

background:#fff;

padding:1px;

color:#333;

position:absolute;

top: 15%;

left: 15%;

height:auto;

z-index: 10

}

.pop_title {

float:left;

width:100%;

height:30px;

line-height:30px;

/*background: #ecf9ff url ('../images/title_move.gif') center no-repeat; */

background:#ecf9ff;

border-bottom:1px #d3ecf3 solid;

color:#444;

font-weight:bold

}

.pop_title_left {

float:left;

width: 90%;

overflow:hidden;

text-indent:6px;

cursor:move

}

.pop_title_left img{

float:left;

border: 0;

margin:10px 0 0 5px

}

.pop_title_right {

width: 5%;

float:right;

text-align:right;

cursor:pointer

}

.pop_title_right_print{

width: 3%;

float:left;

text-align:right

}

.pop_title_right img{

margin: 5px10px 5px 10px;

cursor:pointer

}

.pop_title_right_printimg {

margin: 5px10px 5px 10px;

cursor:pointer

}

.pop_content {

float:left;

width:100%;

margin: 1px0 0 0;

font-size:14px

}

.pop_function {

float:left;

width:100%;

height:30px;

line-height:30px;

border-top:1px #fff solid;

text-align:center

}

.pop_search {

width:100%;

height:35px;

border-top:1px #fff solid;

text-align:center;

font-size:12px;

font-weight:bold;

margin: 5px0 5px 0;

border-bottom:3px #96D1DF dotted;

}

.pop_page {

width:100%;

height:25px;

text-align:center;

font-size:12px;

border-top:3px #96D1DF dotted;

vertical-align:middle;

}

</style>

function getxy(e) {

var a = newArray();

var t =e.offsetTop;

varl = e.offsetLeft;

var w =e.offsetWidth;

var h =e.offsetHeight;

while (e =e.offsetParent) {

t+= e.offsetTop;

l+= e.offsetLeft;

}

a[0] = t;

a[1] = l;

a[2] = w;

a[3] = h;

return a;

}

//----------------------------------

var DragForAll = {};

function_enableDragForAll(e, toMoveObj, obj2, obj3) {

if(DragForAll.o) {

returnfalse;

}

varclickObj = document.getElementById(toMoveObj);

if(!clickObj) {

return;

}

DragForAll.o= clickObj;

if(document.getElementById(obj2)) {

DragForAll.p= document.getElementById(obj2);

}

DragForAll.xy= getxy(DragForAll.o);

e = e ||event;

if(!clickObj.style.left) {

DragForAll.xx= new Array((e.x - DragForAll.xy[1]), (e.y - DragForAll.xy[0]));

} else {

DragForAll.xgap= parseInt(clickObj.style.left.substring(0,clickObj.style.left.indexOf("px")));

DragForAll.ygap= parseInt(clickObj.style.top.substring(0,clickObj.style.top.indexOf("px")));

DragForAll.xx= new Array((e.x - DragForAll.xgap), (e.y - DragForAll.ygap));

DragForAll.xgap-= DragForAll.xy[1];

DragForAll.ygap-= DragForAll.xy[0];

}

DragForAll.fitToCont= obj3;

if (obj3) {

DragForAll.fitArea= getxy(DragForAll.fitToCont);

}

returnfalse;

}

function_DragObjForAll(e) {

if(!DragForAll.o) {

return;

}

e = e ||event;

varold_left = e.x - DragForAll.xx[0];

var old_top= e.y - DragForAll.xx[1];

if(DragForAll.fitToCont) {

if((old_left - DragForAll.xgap) - DragForAll.fitArea[1] <= 0 || old_top -DragForAll.ygap - DragForAll.fitArea[0] <= 0) {

return;

}

if(old_left - DragForAll.xgap + DragForAll.xy[2] >= DragForAll.fitArea[1] +DragForAll.fitArea[2] || old_top - DragForAll.ygap + DragForAll.xy[3] >=DragForAll.fitArea[0] + DragForAll.fitArea[3]) {

return;

}

DragForAll.o.style.left= old_left + "px";

DragForAll.o.style.top= old_top + "px";

if(DragForAll.p) {

DragForAll.p.style.left= (old_left + 5) + "px";

DragForAll.p.style.top= (old_top + 5) + "px";

}

function_releaseDragObjForAll(e) {

DragForAll= {};

}

document.οnmοusemοve= function (e) {