V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
click
V2EX  ›  问与答

请问这种网页弹框效果是怎么做出来的?

  •  
  •   click · 2014-12-04 01:20:34 +08:00 · 4386 次点击
    这是一个创建于 3638 天前的主题,其中的信息可能已经有所发展或是发生改变。
    
    好像不是用的window.open()方法
    19 条回复    2014-12-04 14:37:10 +08:00
    tanyuxiang
        1
    tanyuxiang  
       2014-12-04 01:26:07 +08:00   ❤️ 1
    ajax
    Bootstrap
    不会写代码,仅供参考。
    sneezry
        2
    sneezry  
       2014-12-04 01:32:32 +08:00 via iPhone   ❤️ 1
    浮动层,用css画的。bootstrap里有现成的modal可以用。
    click
        3
    click  
    OP
       2014-12-04 01:45:23 +08:00
    请告诉我搜索关键词
    ericls
        4
    ericls  
       2014-12-04 01:46:27 +08:00 via Android   ❤️ 1
    @click modal
    andybest
        5
    andybest  
       2014-12-04 01:56:44 +08:00   ❤️ 1
    产品经理的术语是叫单模还是啥玩意
    Sivan
        6
    Sivan  
       2014-12-04 01:59:26 +08:00 via iPhone
    模态对话框 modal
    bearcat001
        7
    bearcat001  
       2014-12-04 01:59:28 +08:00 via iPhone   ❤️ 1
    模式对话框 or 非模式对话框
    区别是后面的界面能不能同时操作
    P233
        8
    P233  
       2014-12-04 05:00:04 +08:00   ❤️ 1
    关键词是 overlay 吧
    kisshere
        9
    kisshere  
       2014-12-04 08:21:59 +08:00 via Android   ❤️ 1
    google一下jquery modal或者百度一下jquery 弹出窗,自己写也太简单了
    lyragosa
        10
    lyragosa  
       2014-12-04 10:16:46 +08:00   ❤️ 1
    来给题主提供渔了

    1先画一个全屏遮罩,zindex设置比较高,比如设置个长宽都覆盖页面的div,背景半透明。

    2在屏幕中间画一个div,可以用fixed布局(比如你不考虑IE低版本,实际上大家都不考虑啦)

    3在这个div上做一些event,比如可以点X按钮关闭,点标题拖动,云云。

    4如果点关闭,那么就移除后面的遮罩层。
    ZzFoo
        11
    ZzFoo  
       2014-12-04 10:31:57 +08:00   ❤️ 1
    kmvan
        12
    kmvan  
       2014-12-04 10:51:39 +08:00
    你们就不能用专业点的术语么。。。这是弹出层
    click
        13
    click  
    OP
       2014-12-04 11:08:06 +08:00
    @lyragosa 谢谢了
    learnshare
        14
    learnshare  
       2014-12-04 11:29:40 +08:00
    @lyragosa 通常来说,不建议用 z-index,新手用起来没分寸,1, 100, 1000, 10000 都是这么用的。

    如果需要让遮罩层覆盖全部内容,只需要把 div.mask 放到 body 尾部之前就好了。然后常规的 position 定位都 OK。

    demo 送上: http://runjs.cn/code/v97zlinf
    66beta
        15
    66beta  
       2014-12-04 12:30:14 +08:00
    楼主,还是补习下基础知识吧~
    xlvecle
        16
    xlvecle  
       2014-12-04 12:58:03 +08:00
    modal。。。补习基础知识吧~
    click
        17
    click  
    OP
       2014-12-04 13:55:24 +08:00
    @66beta
    @xlvecle
    嗯。我本来就是初学者。
    stiekel
        18
    stiekel  
       2014-12-04 13:57:49 +08:00
    http://getbootstrap.com/javascript/#modals
    这里是Bootstrap里实现的Modal,我一直用它。
    xlvecle
        19
    xlvecle  
       2014-12-04 14:37:10 +08:00
    @click 初学就好好加油吧,楼上贴了bootstrap的,我给你个foundation的
    http://foundation.zurb.com/docs/components/reveal.html
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5943 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 02:17 · PVG 10:17 · LAX 18:17 · JFK 21:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.