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

设计场景：

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

      

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

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

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

 

设计目标:

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

 

 

解决方案：

    首先，咱们设计一个Div，样式以下：

  

代码

 

 

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

 

代码

 

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

 

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

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

 

 

代码

 

 

脚本以下：

 

代码

最终显示效果以下：

 

 

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

 

设计小结：

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