两种方式解决DIV弹出窗口问题-弹出窗口

本文向大家描述一下如何***实现DIV弹出层功能，这里有二种方式处理DIV弹出窗口，一种是用JavaScript代码，另一种是用样式，具体内容请看本文详细介绍，相信本文介绍一定会让你有所收获。

***实现DIV弹出层功能

要想***实现DIV弹出层功能，这里推荐一个轻量级JavaScript工具：subModal（包括图片和样式仅8KB左右，JavaScript文件4.27KB），subModal实现用DIV模拟的模式DIV弹出窗口，非常漂亮且简单实用。其中发表评论窗口就是DIV弹出窗口样式。

下面将介绍此JavaScript工具的使用：

在开始使用之前需要下载文件：

已经整理后的版本：subModal

原始版本（英文）：http://gabrito.com/files/subModal/可以在此页面查看运行效果。页面引用相关文件。在需要DIV弹出窗口的页面上引用样式文件和Javascript文件：

viewsourceprint?

1.<linkrellinkrel="stylesheet"type="text/css"href="submodal.css"/> 
2.<scripttypescripttype="text/javascript"src="submodal.JavaScript"></script>

源代码中的submodal.JavaScript,submodal.css,loading.html,loading.gif,close.gif是必须文件，其他为演示实例文件。

若要改变DIV弹出窗口样式，或者改变close.gif图片路径，请编辑submodal.css
若需要改变加载效果，需编辑loading.html，现在我们就可以编写代码来DIV弹出窗口了，有二种方式处理DIV弹出窗口：

◆用JavaScript代码：

DIV弹出窗口的函数为：showPopWin(url,width,height,returnFunc),url为弹出链接，width为宽带，height为高度，returnFunc为当窗口弹出后的回调函数。其中高宽以像素为单位，例如：

<!–以下代码将会在弹出DIV弹窗，弹窗中页面为modalcontent.html,弹窗的宽度为400像素，高度为200像素–>

viewsourceprint?

1.<p><buttononclickbuttononclick=
"showPopWin('modalcontent.html',400,200,null);"> 
showmodalwindowbutton</button></p>

◆用样式:

subModal支持设置特别的样式来完成DIV弹出窗口的功能。当链接上设置submodal或者submodal-width-height格式的样式后，页面运行过程中subModal将会为链接增加处理事件。当点击链接时，将在DIV弹窗中展示链接的页面，而不是新的浏览器窗口。

例如：

viewsourceprint?

1.<p><aclassaclass="submodal"href="modalcontent.html"> 
showmodalwindowusingclass</a> 
2.<!--将在DIV弹窗中显示dodalcontent.html页面--></p> 
3.  
4.<p><aclassaclass="submodal-200-400"href="modalcontent.html"> 
showmodalwindowusingclassandoverridingdefaultsize</a> 
5.<!--将在DIV弹窗中显示dodalcontent.html页面，且宽带为200像素，高度为400像素--></p>

关闭弹出可以在当前页码调用hidePopWin()函数或者在弹出页面中调用window.parent.hidePopWin()，如：

viewsourceprint?

1.<buttononclickbuttononclick="window.parent.hidePopWin()">close</button>

在http://www.cnblogs.com/lzppcc/archive/2008/01/14/1038977.html看到到的这个弹出框很漂亮,但不能通过鼠标拖动弹出的窗口,难免遗憾,便自己写了JavaScript代码,实现了这个功能.

subModal.JavaScript
//***********************以下为新增控件的拖曳事件***************************************************

vargMouseMove=false;  
varx,y,z  
//开始拖曳  
functionstartDrag(obj){  
if(event.button==1||event.button==0){  
x=window.event.clientX;  
y=window.event.clientY;  
z=obj.style.zIndex;  
obj.style.zIndex=500;  
obj.setCapture();//设置属于当前对象的鼠标捕捉  
gMouseMove=true;  
}  
}  
//拖动事件,obj为激发当前事件的控件,dragID为等拖曳控件的ID  
varDraging=functionDraging(obj,dragID){  
if(gMouseMove){  
varoldwin;  
if(dragID=='undefined'||dragID==''){  
oldwin=obj.parentNode  
}  
else{  
oldwin=document.getElementById(dragID);  
}  
 
oldwin.style.left=pixParse(oldwin.style.left)+window.event.clientX-x;  
oldwin.style.top=pixParse(oldwin.style.top)+window.event.clientY-y;  
x=window.event.clientX;  
y=window.event.clientY;  
}  
}  
//将象素单位转为数据129px-->129  
functionpixParse(str){  
strstr=str.replace('px','');  
returnparseInt(str);  
}  
//停止拖动  
functionstopDrag(obj){  
gMouseMove=false;  
obj.style.zIndex=z;//还原Z座标  
obj.releaseCapture();  
 
}

initPopUp()方法中增加了三个事件,如下：

<DIVclassDIVclass="x-window-headerx-unselectablex-window-draggable" 
id="ext-gen15"style="MozUserSelect:none;  
KhtmlUserSelect:none"unselectable="on" 
onMousedown="startDrag(this)"onMouseup="stopDrag(this)"  
onMousemove="Draging(this,\'ext-comp-1001\')">

【编辑推荐】