V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
lml12377
V2EX  ›  JavaScript

JS 实现弹出层

  •  
  •   lml12377 · 2016-05-10 17:29:06 +08:00 · 2881 次点击
    这是一个创建于 3111 天前的主题,其中的信息可能已经有所发展或是发生改变。

    需求大概是这样的:在我博客里的相册栏目,我要 [创建 /修改] 相册,不想跳到新的页面,说一下我各种实现方式:

    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 啊...),不知道我上面实现弹出层的思路方向是不是对的?如何实现的比较通用?或者前辈们收集有一些文章能不能分享下 (๑•̀ㅂ•́)و✧

    6 条回复    2016-05-10 21:14:23 +08:00
    yimity
        1
    yimity  
       2016-05-10 17:39:44 +08:00   ❤️ 1
    你的思路是对的。只不过数据有的是用了 iframe ,有的是远端拿过来 html 。而你的是提前把 html 拿过来放到这里,用的时候直接显示。
    dphdjy
        2
    dphdjy  
       2016-05-10 17:48:06 +08:00 via Android   ❤️ 1
    iframe 可能是方便 post 数据吧~(毕竟这样不要自己写)
    在看 react.js 核心就是你这个思路,写完也差不多就是你上面这样,一大堆 JS 然后调用构造 HTML ,准确来说所有的都是酱紫~
    不过你的创建 /修改也就 2 个 pop 层呐?为何会做的这么麻烦?
    pimin
        3
    pimin  
       2016-05-10 17:56:03 +08:00 via Android   ❤️ 1
    bootstrap 的 popover?
    chemzqm
        4
    chemzqm  
       2016-05-10 17:57:53 +08:00   ❤️ 1
    现代一点浏览器都支持 formData API ,用这个配合 XHR 就能上传了, iframe 是 ie 6 年代的东西了。可参考 https://github.com/component/upload/blob/master/index.js
    lml12377
        5
    lml12377  
    OP
       2016-05-10 18:51:17 +08:00
    @dphdjy 写的通用点,其实是考虑到其他用途,比如 pop 出的层通过 createPop() 传递一些参数,可以弹出一些没有操作按钮的 loading/processing 小窗,或者是提示层( setTimeout 几秒后消失)。但是发现很多实现是还有关联在当前弹出层的弹出层,比如 qq 相册创建的时候选择 “回答问题可见” 之后出现的新的弹出层,看到这种关联瞬间又炸了...
    dphdjy
        6
    dphdjy  
       2016-05-10 21:14:23 +08:00 via Android   ❤️ 1
    @lml12377 把这些通用的做参数传进去, Content 填自定义 HTML 不就好了~事件绑定在传入的 HTML 元素上

    然后多个层的话~考虑一下可能出现的情况,分下级~

    不过这样有个问题, Remove 元素,下次使用事件需要重新绑定
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2647 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 15:28 · PVG 23:28 · LAX 07:28 · JFK 10:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.