submodal完解

  查看文章   完美实现div弹出层功能 subModal 2010-05-22 17:29 完美实现div弹出层功能，这里推荐一个轻量级js工具：subModal （包括图片和样式仅8KB左右，js文件4.27 KB） subModal实现用DIV模拟的模式弹出窗口，非常漂亮且简单实用。 其中发评论窗口就是弹出窗口样式。 下面将介绍此js工具的使用： 在开始使用之前需要下载文件： 已经整理后的版本： subModal 原始版本（英文）：http://gabrito.com/files/subModal/   可以在此页面查看运行效果。 页面引用相关文件。在需要弹出窗口的页面上引用样式文件和Javascript文件： view source print? 1. 2. 源代码中的submodal.js, submodal.css, loading.html,loading.gif,close.gif 是必须文件，其他为演示实例文件。 ​ 若要改变弹出窗口样式，或者改变close.gif图片路径，请编辑 submodal.css ​ 若需要改变加载效果，需编辑loading.html 现在我们就可以编写代码来弹出窗口了，有二种方式处理弹出窗口： 用js代码： 弹出窗口的函数为：showPopWin(url, width, height, returnFunc) ,url为弹出链接，width为宽带，height为高度，returnFunc为当窗口弹出后的回调函数。其中高宽以像素为单位，例如： 1.

show modal window button

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

show modal window using class 2.

3. 4.

show modal window using class and overriding default size 5.

关闭弹出可以在当前页码调用hidePopWin()函数或者在弹出页面中调用window.parent.hidePopWin()，如： 1.close 在 http://www.cnblogs.com/lzppcc/archive/2008/01/14/1038977.html看到到的这个弹出框很漂亮,但不能通过鼠标拖动弹出的窗口,难免遗憾,便自己写了JS代码,实现了这个功能. subModal.js //***********************以下为新增控件的拖曳事件*************************************************** var gMouseMove=false; var x,y,z //开始拖曳 function startDrag(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 var Draging = function Draging(obj,dragID){ if( gMouseMove ){    var oldwin;    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 function pixParse(str){ str = str.replace('px',''); return parseInt(str); } //停止拖动 function stopDrag(obj){ gMouseMove = false; obj.style.zIndex = z; //还原Z座标 obj.releaseCapture(); } initPopUp()方法中增加了三个事件,如下