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

请教, bootstrap 的 modal,如何让其高度等于屏幕的高度,然后在 modal 内部出现垂直滚动条!

  •  
  •   leedstyh · 2016-09-26 01:37:09 +08:00 · 3157 次点击
    这是一个创建于 2982 天前的主题,其中的信息可能已经有所发展或是发生改变。
    7 条回复    2016-09-26 16:26:56 +08:00
    halden
        1
    halden  
       2016-09-26 03:59:35 +08:00   ❤️ 1
    bootstrap 默认将.modal-dialog 的高度设成 600px(>768px),或者 auto(small screens),要改的话用 script

    $(document).ready(function(e) {
    $('.modal-dialog').css({height:'100%', border: 0, padding: 0, 'max-height':'100%'});
    $('.modal-content').css({height:'100%', 'max-height':'100%'});
    });

    滚动条在 css 里面写
    .modal-content{ overflow-y:scroll; }

    不知道你是不是要这样的效果,还是说你只要 content 内的 body 做滚动
    sherlocktheplant
        2
    sherlocktheplant  
       2016-09-26 09:32:38 +08:00   ❤️ 1
    .modal-dialog {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    }

    .modal-content {
    overflow-y: scroll;
    position: absolute;
    top: 0;
    bottom: 0;
    }

    如果有没有生效的样式 可以加个!important
    leedstyh
        3
    leedstyh  
    OP
       2016-09-26 13:24:27 +08:00
    @halden @sherlocktheplant

    谢谢二位,代码很有用,十分感谢
    leedstyh
        4
    leedstyh  
    OP
       2016-09-26 13:29:01 +08:00
    @sherlocktheplant 另外再想把 .modal-header 部分固定在 modal 的上部呢,
    leedstyh
        5
    leedstyh  
    OP
       2016-09-26 13:33:24 +08:00
    @sherlocktheplant

    我照猫画虎的添加了

    .modal-header {
    position: fixed;
    top: 0;
    right: 10px;
    left: 0;
    }

    .modal-body {
    padding-top: 50px;
    }

    但是那个关闭按钮( x )无法点击了

    其实我就是想让 modal 的内容可以滚动,然后那个关闭按钮( x )一直固定在一个位置,然后用户可以不管往下拉到哪,都可以随时点击( x )关掉 modal 。
    leedstyh
        6
    leedstyh  
    OP
       2016-09-26 14:31:55 +08:00
    @sherlocktheplant

    .modal-dialog {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    }

    .modal-content {
    /*overflow-y: scroll; */
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    }

    .modal-body {
    overflow-y: scroll;
    position: absolute;
    top: 50px;
    bottom: 0;
    width: 100%;
    }

    .modal-header .close {margin-right: 15px;}

    我这么改了下,看起来可以工作,对 css 实在太不熟悉了!能麻烦帮我看下这么改行吗
    sherlocktheplant
        7
    sherlocktheplant  
       2016-09-26 16:26:56 +08:00   ❤️ 1
    @leedstyh 没什么大的问题 就是有点乱而已
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5980 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 02:19 · PVG 10:19 · LAX 18:19 · JFK 21:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.