Question

我想在我的Bootstrap模式中使用固定标头，但是如果我将 .modal-header 设置为 position：fixed ，它会与moda内容一起滚动。如何在BS模态中创建一个固定的固定头？

Answer 1

不要试图修复标题，只需修复主体的高度并使其可滚动即可。这样，页眉（和页脚）将始终可见。

您可以使用CSS3 vh unit和calc轻松完成此操作。 vh calc和See the jsfiddle都有很好的浏览器支持（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;
}

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依赖项。

Answer 3

我的解决方案可能看起来有些愚蠢，但它详细介绍了我为用例解决此问题所采取的步骤。

我尝试了类似ritz078的answer之类的内容，但我发现它在滚动时在iOS上效果不佳，因为Safari喜欢以自己的方式做事。

所以，我的解决方案是复制我想要附加的代码，并将重复的代码放在模态之外，完全放在它自己的隐藏包装器中：

<div class="fixed-header">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
    </div>
</div>

然后我使用JS来1）在我稍微滚动模态之后使重复的代码可见，2）每当我点击模态时关闭重复的代码，并且3）将功能恢复到重复的模态＆＃39;关闭按钮：

$('#myModal').on('scroll', function() {
    var threshold = 60;

    if ($('#myModal').scrollTop() > threshold) {
        $('.fixed-header').addClass('affixed');
    }
    else {
        $('.fixed-header').removeClass('affixed');
    }
});

$('#myModal').on('hide.bs.modal', function (e) {
    $('.fixed-header').removeClass('affixed');
});

$('.fixed-header button').click(function() {
    $('#myModal').modal('hide');
});

这里的挑战是匹配模态的样式（特别是它的宽度和边距），但是这个解决方案让你可以在iOS上自由滚动模态，而不会看起来很时髦，这是我的目标。

JSFiddle（从Jasny's answer分叉，以显示其范围与答案的不同之处）

Answer 4

根据我的评论，这实际上是Bootstrap 3的改进。允许长内容并拥有整个模态滚动，而不仅仅是模态的'内容'。

你可以用这样的东西覆盖它，但它不是那么好的功能。

.modal {
  overflow: hidden;
}

.modal-body {
  height: 300px;
  overflow: auto;
}

<强> Demo

Answer 5

在javascript中添加一个类到模态：

windowClass: 'framework-modal'

在css adjust o modal-body中：

.framework-modal .modal-body {
    max-height: 600px;
    overflow: auto;
}

Answer 6

身体内容

CSS：

body{
    overflow:hidden;
}

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

6 个答案:

{{3}}