jquery弹出层背景变暗 Lee dialog

tznktg

经常会看到这种弹出层背景变暗的效果，感觉手痒于是自己写了一个基于jquery的弹出层类，相比ThickBox来说比较简单，功能没它那么强大。

我习惯先写好结构和样式，然后再写js交互效果。结构定义了两个层，一个为半透明的背景层，一个是弹出层主要结构，都设为浮动position:absolute;背景层遮掉所有body内容很容易做到。主要层左右居中，设置left等于窗口宽除二减去自身层宽除二就居中了，至于窗口上下居中我没做到，固定了top等于滚动条隐去的scrollTop加上50px;

当事件触发这个类时，首先判断一下两个层是否已经append到body里面，否则每次触发它就一直增加增加了。设置了五个参数title、content、width、height、cssName，它们分别定义了层标题、层内内容、层宽、层高、层内容的样式名。层内内容又设置了url、text、id、iframe四种加载方式，通过ajax以get或post加载目标url的html内容，text是直接在事件里写入内容，而id是取得页面上某个id里面的html显示到弹出层里，iframe都知道是在层里面以框架显示目标url了。往往弹出层里面的内容样式也是各种各样的，所以加了一个参数cssName，通过它就可以把层内的内容给排好了。



看看Lee dialog 1.0演示，有什么建议留言说！

演示地址:http://www.xij.cn/blog/wp-content/uploads/2008/08/dialog

[ 本帖最后由 tznktg 于 2009-12-26 09:18 编辑 ]

tznktg

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Features:
ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it's 58k.
The ThickBox JavaScript code and CSS file only add an additional 15k (only 10k by using the thickbox-compressed.js) on top of the jQuery code. The CSS file could additionally be compressed if need be.
ThickBox will resize images that are bigger than the browser window.
ThickBox offers versatility (images, iframed content, inline content, and AJAX content).
ThickBox will hide form elements in Windows IE 6.
ThickBox will remain centered in the window even when the user scrolls the page or changes the size of the browser window. Clicking an image, the overlay, or close link will remove ThickBox.
Due to the ThickBox creator's view that transitions should be tailored by individual authors, ThickBox windows do not implement fancy transitions. Feel free to add them as you see fit. Is this a feature? Well, some might say it is.
ThickBox can be invoked from a link element, input element (typically a button), and the area element (image maps).

演示地址:http://jquery.com/demo/thickbox/

tznktg

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

背景层结构：

<div id="windownbg" style="height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;z-index: 999901"></div>
然后是弹出层的结构：

<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/