本文探讨了在前端页面中设计通用信息显示窗的方法，避免频繁的页面跳转，通过一个div弹出层展示详细信息。介绍了如何通过调整z-index和透明度实现信息窗，并分为文字和图片两列显示。关键代码包括链接触发信息窗、动态创建弹出层及数据格式化。对比常规做法，通用信息显示窗减少了页面请求和数据库读取次数，降低了开销，适合大数据量场景。
继续上一篇文章扯蛋。请思考一个问题，上一篇文章那个公司信息列表，如果要查看某一公司的详细信息，要如何设计相关功能？请大家先思考一下。
常规做法——设计一个公司信息显示页面，例如：viewcompany.htm，显示公司信息时将公司编号作为url参数传过去，例如：viewcompany.htm?id=2，为方便用户操作，一般会在viewcompany.htm添加一个返回按钮，可以返回到公司信息列表页面。说说我的做法，设计一个通用信息显示窗（实际上是一个div弹出层），将相关信息在此窗体中显示。至于为什么要这么做文章末尾会分析两种做法的开销对比。先看效果（所有公司名称均为虚构，如有雷同实属巧合）：
一、功能分析
为防止点击公司名称反复弹出div层，需要用一个mask层覆盖在公司信息列表上面，修改mask层的z-index，并设置透明度。然后将信息弹出层显示在mask层上面，通过修改z-index实现。
最重要的是，让此信息显示窗能显示通用信息，这里将信息简单分成文字和图片两种类型，窗口分两列显示，文字高度固定，图片高度可变，窗口应能滚动以显示所有信息。
二、关键代码：
1、首先是公司信息列表中公司名称链接，点击此链接应弹出通用信息显示窗口
最低0.47元/天 解锁文章
819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
