一个jQuery弹出层(tipsWindown)

Await / 前端交互资源分享 / 2009/11/25 12:24 / 热度(49,782)

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

背景层结构：

然后是弹出层的结构：

<div id="windown-box">
<div id="windown-title">
<h2></h2>
<span id="windown-close">关闭</span>
</div>
<div id="windown-content-border">
<div id="windown-content"></div>
</div>
</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再加上滚动条滚去的高度。

if ( _version == 6.0 ) {
$("#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"});
}else {
$("#windown-box").css({left:"50%",top:"50%",marginTop:-((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
};

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

DragHead.onmousedown = function(e) {
if(drag == "true"){moveable = true;}else{moveable = false;}
e = window.event?window.event:e;
var ol = Drag_ID.offsetLeft, ot = Drag_ID.offsetTop-moveTop;
moveX = e.clientX-ol;
moveY = e.clientY-ot;
document.onmousemove = function(e) {
if (moveable) {
e = window.event?window.event:e;
var x = e.clientX - moveX;
var y = e.clientY - moveY;
if ( x > 0 &&( x + sw < cw) && y > 0 && (y + sh < ch) ) {
Drag_ID.style.left = x + "px";
Drag_ID.style.top = parseInt(y+moveTop) + "px";
Drag_ID.style.margin = "auto";
}
}
}
}

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

var closeWindown = function() {
$("#windownbg").remove();
$("#windown-box").fadeOut("slow",function(){$(this).remove();});
}
if( time == "" || typeof(time) == "undefined") {
$("#windown-close").click(function() {
$("#windownbg").remove();
$("#windown-box").fadeOut("slow",function(){$(this).remove();});
});
}else {
setTimeout(closeWindown,time);
}

胡乱的说了一通。不知道大家能不能看明白…详细的演示请点击下面的链接

http://leotheme.cn/wp-content/uploads/Example/js/tipswindown/

Patrick
2011/04/22

我看了博主的回复，但是我一直为确定按钮如何绑定回调函数犯晕？回调函数是ajax()的什么属性啊？

回复
- Await
  2011/04/22
  
  你的确定按钮是弹出层的那个还是表单的那个？表单的话你加载的时候内容是url还是框架？
Patrick
2011/04/21

博主你好，我遇到了弹出层的按钮无法提交到服务器的问题，我推测原因可能出在弹出层未append到页面的form中，请问博主能否说说怎样把弹出层append到form中吗？谢谢

回复
- Await
  2011/04/21
  
  别忘了给确定按钮绑定回调函数！~
liangzi
2010/12/13

楼主用tipwindow打开的div里包含了button和textbox的话，button的click事件不能提交到服务器，textbox里面输入的内容也提交不到服务器这个是什么原因啊，很期待你的答复

回复
zhouli520
2010/12/08

楼主，那个点击按钮关闭这个，还没有麽？
今天做到的项目里就需要这个功能，无奈jQuery不行，不知道怎么改写你的代码了。

回复
mcooo
2010/11/21

http://www.planeart.cn/?p=877

IE6的Fixed定位，这里有个方法，可以集成在你的tipsWindown里就好了，planeart的artDialog3.0 已经实现，但用不着这样强大对话框组件。。

回复
- Await
  2010/11/21
  
  已经重写代码了.现在兼容IE6的Fixed了….现在还没发布!~
YY
2010/10/29

东西很不错，正是我想找的东西，感谢了！
问一个问题，我放置了一个Silverlight控件，没有显示出来，是不是还有什么地方要设置的，诚心求教，多谢！

回复
大猪
2010/10/26

ie6下还是会弹出在第一屏中，能调整一下吗？

回复
- 大猪
  2010/10/26
  
  找到原因了，把tipswindown.js里的var isIE6=true;改成var isIE = (document.all) ? true : false;
  var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
喜剧
2010/10/14

亲爱的楼主啊
除了点“X”关闭层之外，要点击一个按钮关闭层，如何写啊？

回复
- Await
  2010/10/15
  
  现在的话要改JS。把关闭改写成函数然后调用；我会抽空重写下这个。
呵呵
2010/10/12

楼主太友爱了。

回复
a
2010/10/11

怎么弄的，新的版本IE6不支持了。

回复
- Await
  2010/10/11
  
  已更新。之前是因为CSS的问题

等待-放飞梦想

评论(100)

发表评论取消回复

等待-放飞梦想