本文向大家描述一下如何完美实现DIV弹出层功能，这里有二种方式处理DIV弹出窗口，一种是用JavaScript代码，另一种是用样式，具体内容请看本文详细介绍，相信本文介绍一定会让你有所收获。
完美实现DIV弹出层功能
要想完美实现DIV弹出层功能，这里推荐一个轻量级JavaScript工具：subModal（包括图片和样式仅8KB左右，JavaScript文件4.27KB），subModal实现用DIV模拟的模式DIV弹出窗口，非常漂亮且简单实用。其中发表评论窗口就是DIV弹出窗口样式。
下面将介绍此JavaScript工具的使用：
在开始使用之前需要下载文件：
已经整理后的版本：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>
在看到到的这个弹出框很漂亮,但不能通过鼠标拖动弹出的窗口,难免遗憾,便自己写了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′)”>
