Web前端设计模式--制作漂亮的弹出层

设计场景：

Ben最近在负责一个购书网站，在网站的首页上，有一个叫做“最新上架”的板块，板块的内容比较简单，只有书籍名称，作者姓名和上架时间（如图），当初设计的时候并i没有过于丰富的构思...

现在问题来了，这个版块不大，更新频率却很高，每天都有十数条最新的信息上去，浏览网站的会员对于最新图书的了解和需求越来越大，因此需要对这个板块进行改良，以满足会员的需求，会员的主要要求有以下几个方面：显示该最新上架的图书的封面缩略图，该图书的名称和作者名称，以及该书部分内容的介绍和作者的简介...

这下把Ben给愁坏掉了，首页上根本就没有多余的空间，怎么来呈现封面缩略图甚至是内容简介，如果去掉别的板块空间来实现这一板块的扩张，无异于在一家公司以牺牲一个部门来壮大另外一个部门，这是万万不可取的...

于是Ben想到了以弹出层的方式来显示每条信息的详细内容...

设计目标:

      在不改变页面结构的情况下，以弹出层（用Dom重构的方式来实现元素的追加append和移除remove）的方式提高页面信息量...

解决方案：

首先，我们设计一个Div，样式如下：

代码

下面是脚本，当鼠标经过的时候才响应弹出框事件：

结果如下（当鼠标指向第三条数据时，弹出该框， 并随鼠标移动）：

做到这边，会员有了一个新的要求，就是不要弹出框随着鼠标的移动而移动，那样鼠标一旦离开焦点，就会移除该弹出框，操作起来不是很方便。他们要求弹出框固定，假设就在相应的数据行的右侧吧，而且打开和关闭由会员自己控制，于是Ben就进行改良了...

同样的，先设计一个id为tips的Div元素，样式如下：

代码

脚本如下：

最终显示效果如下：

鼠标移动到相应的数据行上面，显示相应的提示框，右边的打叉小图标用以关闭整个弹出层...

设计小结：

     这个设计过程的关键是position：absolute（绝对定位，作用是让层在页面上叠加），z-index（用以显示层的叠加次序），top、left（显示弹出页面坐标），（offset().left,offset().top）在页面上找到某个元素的坐标，位置找到了，就可以随意在它的周边定位弹出层了，其他的样式可以根据自己的美工需求随意调节...