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

　2010-10-30 08:32:55　来源：WEB开发网　　　

核心提示：使用 MVC 设计模式的 Dojo Gridhttp://tech.cncms.com/sheji/js/66674.htmlBen最近在负责一个购书网站，在网站的首页上，Web前端设计模式－－制作漂亮的弹出层，有一个叫做“最新上架”的板块，板块的内容比较简单，我们设计一个Div，样式如下：.T

使用 MVC 设计模式的 Dojo Grid

http://tech.cncms.com/sheji/js/66674.html

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

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

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

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

设计目标:

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

解决方案：

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

.TipDiv        {            width:500px;            height:120px;            padding:8px;            border-top:solid 5px #a6c9e2;            border-bottom:solid 5px #a6c9e2;            border-left:solid 1px #a6c9e2;            border-right:solid 1px #a6c9e2;            background:#ffffff;            z-index:10;/*z-index很重要，它决定了Div框在页面上的叠加顺序*/            position:absolute;/*绝对定位，它决定了该元素可以根据top 和 left 叠在其他元素上*/        }                .TipDiv img        {           width:110px;           height:110px;           margin-right:36px;           margin-left:10px;           float:left;        }                 .TipDiv span        {            /*×*/          width:340px;          height:110px;          float:left;          word-break:break-all;          border-top:dashed 1px #3a7ac8;          margin-top:8px;        }

1 2 3 下一页