需求大概是这样的:在我博客里的相册栏目,我要 [创建 /修改] 相册,不想跳到新的页面,说一下我各种实现方式:
1 、最初是在 body 结束之前事先写好 div 的弹出层并设置为 display:none; 使用的时候 show() 出来;
2 、后来发现这种到处写弹出窗很傻,而且一个页面如果包含很多操作,那页面下面会有一堆预先写好的 div 层,于是在 js 里面写了一个简单的 createPop() 方法,基本就是通过 createElement/appendChild 的方式创建并将弹出层在使用时临时绑定到 body 上,主要包含两个部分: pop/pop-bg ,前者是弹出层,后者是半透明遮罩层。而 pop 里又分成 pop-title/pop-body/pop-button ,分别对应 标题栏 /内容区域 /按钮栏。而弹出层的销毁就直接 removeElement 。这样比如创建一个 [创建相册] 的弹出层则直接定义一个 createAlbum 方法,里面主要干 3 件事,首先调用 createPop() 创建弹出层,再往 pop-body 里塞入创建相册的表单 html ,最后绑定 createAlbumSubmit 事件到 pop-button 中的提交按钮,点击按钮后首先检查表单,然后通过 ajax 发送创建信息,成功则调用 createAlbumCallback 关闭弹出层并在 ul li 的相册列表中动态塞入一个新 li 相册并提示创建成功。
3 、再后来看到 qq 空间和 vk.com 的实现,创建相册时都是需要请求远程地址的,前者是 iframe 嵌入到弹出层,后者是 ajax 请求比如 createAlbum.php 后将内容自己塞入弹出层,其实我本人比较倾向于后者, qq 的 iframe 在 input 提示错误信息往下挤的时候外层弹出层并不会扩大,按钮会被隐藏掉一部分,可能 iframe 也只有在相册弹出层比较有优势吧,比如发布文章时的插入图片功能。
vk.com 的 common.js 里看到了 MessageBox 和 showBox ,大概估计是实现弹出层的... 但是对于一个 phper 来说现在的 js 什么 prototype/extend/react 看起来实在是炸了(满屏幕的 js 啊...),不知道我上面实现弹出层的思路方向是不是对的?如何实现的比较通用?或者前辈们收集有一些文章能不能分享下 (๑•̀ㅂ•́)و✧
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.