一个jQuery弹出层(tipsWindown) | 周忞 | 吉心的记事本

一个jQuery弹出层(tipsWindown)

弹出层效果网上很多很多,也没啥好说的了。写这个只是作为学习JQ的一些记录。此插件的一些方法参考了花匠的dialog;在此表示感谢。
接着说说这种弹出层的原理或者说是做法。总结下经验;首先需要一个遮罩层来实现灰色背景。我们可以创建一个z-index高于其他层的DIV。然后设为绝对定位。接着获取页面的高度并把它作为这个DIV的高度。这样背景层的问题就OK了;
背景层结构:

  1. <div id="windownbg" style="height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;z-index: 999901"></div>

然后是弹出层的结构:

  1. <div id="windown-box">
  2.     <div id="windown-title">
  3.         <h2></h2>
  4.         <span id="windown-close">关闭</span>
  5.     </div>
  6.     <div id="windown-content-border">
  7.         <div id="windown-content"></div>
  8.     </div>
  9. </div>

我们把这个结构通过 jQuery 的 “append” 方法追加到 body 里面;然后对它进行定位;这个定位有点复杂。固定垂直居中的方法很简单,大家都知道可以把它的position设为fixed,然后把的top、left设为50%,然后margin负 1/2 本身的宽度的一半就行了。但在IE6下,不支持fixed,而且在IE6里它的top算法也和FF不一样。FF下。top:50%是以当前页的可视内容最顶上的开始计算;而IE6下则是以整个文档的最上边开始计算。假如你把滚动条拉到最底部。然后弹出窗口。你会发现在IE6弹出的层看不见。因为它在上面。也就是在第一屏没有滚动滚动条时那个居中位置。所以在IE6下,这个高度要另外计算。它的top实际上是等于它本身的高度除以2再加上滚动条滚去的高度。

  1. if ( _version == 6.0 ) {
  2.     $("#windown-box").css({left:"50%",top:(parseInt((ch)/2)+est)+"px",marginTop: -((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
  3. }else {
  4.     $("#windown-box").css({left:"50%",top:"50%",marginTop:-((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
  5. };

定位问题解决了就好办了。剩下的就是获取内容和一些附加效果了。内容这里可以设定的类型有5种。分别是:text、ID、img、url、iframe 这个就不说了。附加效果就拖拽和自动关闭。拖拽这个东西有点复杂。但了解原理后也就不复杂了。首先是获取对像的offsetLeft和offsetTop这两个值。这两个值是对像距离浏览器窗口左边和上边的距离。然后绑定鼠标事件,当按下的时候计算鼠标当前的座标clientX、clientY。并计算这两个参数的差值得到新的座标moveX、moveY。当鼠标拖动的时候。计算当前鼠标的座标与之前得到的moveX、moveY之间的差值。这个值就是对像的新的座标了。把它符值给对像的top、left就实现了拖拽。

  1. DragHead.onmousedown = function(e) {
  2.     if(drag == "true"){moveable = true;}else{moveable = false;}
  3.     e = window.event?window.event:e;
  4.     var ol = Drag_ID.offsetLeft, ot = Drag_ID.offsetTop-moveTop;
  5.     moveX = e.clientX-ol;
  6.     moveY = e.clientY-ot;
  7.     document.onmousemove = function(e) {
  8.         if (moveable) {
  9.             e = window.event?window.event:e;
  10.             var x = e.clientX - moveX;
  11.             var y = e.clientY - moveY;
  12.             if ( x > 0 &&( x + sw < cw) && y > 0 && (y + sh < ch) ) {
  13.                 Drag_ID.style.left = x + "px";
  14.                 Drag_ID.style.top = parseInt(y+moveTop) + "px";
  15.                 Drag_ID.style.margin = "auto";
  16.             }
  17.         }
  18.      }
  19. }

自动关闭就很简单了。就是一个setTimeout
自动关闭代码:

  1. var closeWindown = function() {
  2.         $("#windownbg").remove();
  3.         $("#windown-box").fadeOut("slow",function(){$(this).remove();});
  4.     }
  5.     if( time == "" || typeof(time) == "undefined") {
  6.         $("#windown-close").click(function() {
  7.             $("#windownbg").remove();
  8.             $("#windown-box").fadeOut("slow",function(){$(this).remove();});
  9.         });
  10.     }else { 
  11.         setTimeout(closeWindown,time);
  12.     }


本文固定链接: http://www.ntxz.net/?p=1184 | 周忞 | 吉心的记事本



该日志由 吉心 于2010年08月01日发表在 Jquery 分类下, 你可以发表评论
在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 一个jQuery弹出层(tipsWindown) | 周忞 | 吉心的记事本
关键字: , ,

一个jQuery弹出层(tipsWindown):等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!