完美实现div弹出层功能

完美实现div弹出层功能，这里推荐一个轻量级js工具：subModal （包括图片和样式仅8KB左右，js文件4.27 KB）

subModal实现用DIV模拟的模式弹出窗口，非常漂亮且简单实用。下面看下运行效果：

subModal运行效果图

其中发表评论窗口就是弹出窗口样式。

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

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

已经整理后的版本： subModal

原始版本（英文）：http://gabrito.com/files/subModal/ 可以在此页面查看运行效果。

页面引用相关文件。在需要弹出窗口的页面上引用样式文件和Javascript文件：

1.<link rel="stylesheet" type="text/css" href="submodal.css" />

2.<script type="text/javascript" src="submodal.js"></script>

源代码中的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为当窗口弹出后的回调函数。其中高宽以像素为单位，例如：

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

1.<p><button onclick="showPopWin('modalcontent.html', 400, 200, null);">show modal window button</button></p>

用样式:

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

例如：

<p><a class="submodal" href="modalcontent.html">show modal window using class</a> 
<!--将在DIV弹窗中显示dodalcontent.html页面--></p>  
  
<p><a class="submodal-200-400" href="modalcontent.html">show modal window using class and overriding default size</a> 
<!--将在DIV弹窗中显示dodalcontent.html页面，且宽带为200像素，高度为400像素--></p>

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

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

在 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()方法中增加了三个事件,如下

posted @ 2009-08-19 16:40 廖非凡阅读(7331) 评论(4) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

完美实现div弹出层功能

公告