jQuery实现优雅的弹窗效果（6）

基于div+css的模式，我们的先来建立html页面。window.html从html代码中可以看到，这里的窗口是用div来实现的，目前的html代码只是描绘了页面的基本骨架，能够效果离窗口效果还相差甚远，不过别急，添加上css代码，页面相对就好看多了。此时的效果如上图，目前只能看到一个窗口的原因是三个div占据了相同的位置，第三个窗口遮盖住了前两个窗口。窗口div的left值=滚动条横坐标+/2，top值=滚动条纵坐标+/2。最终完成完整的jQuery代码如下：左下角和中间窗口的div是靠触发click事件来显示窗口，在滚动条滚动时触发scroll事件来重新调用计算div的top和left的函数。