click
V2EX  ›  问与答

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

  •  
  •   click · Dec 4, 2014 · 5138 views
    This topic created in 4355 days ago, the information mentioned may be changed or developed.
    
    好像不是用的window.open()方法
    19 replies  •  2014-12-04 14:37:10 +08:00
    tanyuxiang
    tanyuxiang
    Dec 4, 2014❤️1
    1
    ajax
    Bootstrap
    不会写代码,仅供参考。
    sneezry
    sneezry
    Dec 4, 2014 via iPhone❤️1
    2
    浮动层,用css画的。bootstrap里有现成的modal可以用。
    click
    click
    OP
    Dec 4, 2014
    3
    请告诉我搜索关键词
    ericls
    ericls
    Dec 4, 2014 via Android❤️1
    4
    @click modal
    andybest
    andybest
    Dec 4, 2014❤️1
    5
    产品经理的术语是叫单模还是啥玩意
    Sivan
    Sivan
    Dec 4, 2014 via iPhone
    6
    模态对话框 modal
    bearcat001
    bearcat001
    Dec 4, 2014 via iPhone❤️1
    7
    模式对话框 or 非模式对话框
    区别是后面的界面能不能同时操作
    P233
    P233
    Dec 4, 2014❤️1
    8
    关键词是 overlay 吧
    kisshere
    kisshere
    Dec 4, 2014 via Android❤️1
    9
    google一下jquery modal或者百度一下jquery 弹出窗,自己写也太简单了
    lyragosa
    lyragosa
    Dec 4, 2014❤️1
    10
    来给题主提供渔了

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

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

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

    4如果点关闭,那么就移除后面的遮罩层。
    kmvan
    kmvan
    Dec 4, 2014
    12
    你们就不能用专业点的术语么。。。这是弹出层
    click
    click
    OP
    Dec 4, 2014
    13
    @lyragosa 谢谢了
    learnshare
    learnshare
    Dec 4, 2014
    14
    @lyragosa 通常来说,不建议用 z-index,新手用起来没分寸,1, 100, 1000, 10000 都是这么用的。

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

    demo 送上: http://runjs.cn/code/v97zlinf
    66beta
    66beta
    Dec 4, 2014
    15
    楼主,还是补习下基础知识吧~
    xlvecle
    xlvecle
    Dec 4, 2014
    16
    modal。。。补习基础知识吧~
    click
    click
    OP
    Dec 4, 2014
    17
    @66beta
    @xlvecle
    嗯。我本来就是初学者。
    stiekel
    stiekel
    Dec 4, 2014
    18
    http://getbootstrap.com/javascript/#modals
    这里是Bootstrap里实现的Modal,我一直用它。
    xlvecle
    xlvecle
    Dec 4, 2014
    19
    @click 初学就好好加油吧,楼上贴了bootstrap的,我给你个foundation的
    http://foundation.zurb.com/docs/components/reveal.html
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1267 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 55ms · UTC 20:59 · PVG 04:59 · LAX 12:59 · JFK 15:59
    ♥ Do have faith in what you're doing.