修复了bootstrap 3模式中的标题位置

Question

我想在我的Bootstrap模式中使用固定的标头,但是如果我将.modal-header设置为position:fixed它会随着moda内容一起滚动.如何在BS模式中创建trully固定标头？

Answer 1

不要试图使标题固定,只需修复主体的高度并使其可滚动.这样,标题(和页脚)将始终可见.

您可以轻松地做到这一点使用CSS3 VH单元一起calc.两个VH作为钙具有相当不错的浏览器支持(IE9 +).

vh单位相对于视口(=浏览器窗口)高度.1 vh是高度的1%,100vh意味着100%的视口高度.

我们只需要减去模态的页眉,页脚和边距的高度.这种动态很难实现.如果这些尺寸是固定的,我们只需添加所有高度.

无论设置的height或max-height到calc(100vh - header+footer px).

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

看到j​​sfiddle

Answer 2

这是一个简单的技巧.让我假设我必须使用类"fixedHeader"修复div

简单的Jquery方式:

$('.modal').scroll(function() {
     var a=$('.modal').scrollTop();
     $('.fixedHeader').css('top',a+'px');
});

CSS

.fixedHeader {
    position:fixed;
}

无论我上面回答的是使用jquery的正常引导程序.但是如果有人使用角度引导程序进行模态,那么

角

$timeout(function() {
    angular.element('.modal').scroll(function() {
        var a = angular.element('.modal').scrollTop();
        angular.element('.fixedHeader').css('top', a + 'px');
    });
}, 10);
/*Put the above in modalinstance controller*/
/*timeout is necessary as you want to run the function after the modal is loaded or sometimes it may be unable to find the class '.modal' */

CSS

.fixedHeader {
    position:fixed;
}

确保在两种情况下都安装了jquery依赖项.