问自举3模态中标头位置的固定
EN

Stack Overflow用户

提问于 2014-02-05 14:44:52

回答 6查看 39.2K关注 0票数 29

我想在我的引导模式中使用一个固定的标题，但是如果我将. moda标头设置为position:fixed它会随moda内容一起滚动。如何在BS模式中创建一个固定的标头？

css

twitter-bootstrap

modal-dialog

云+校园专区

助力在校大学生快速入门云计算，畅游云端

回答 6

Stack Overflow用户

回答已采纳

发布于 2014-04-27 05:38:44

不要试图使标题固定，只需固定身体的高度并使其可滚动即可。这样，页眉(和页脚)总是可见的。

您可以使用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;
}

看到弹琴了

票数 95

Stack Overflow用户

发布于 2014-06-01 07:03:34

这里有个简单的技巧。让我假设我必须用类"fixedHeader“来修复div

简单的Jquery方式：

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

CSS

.fixedHeader {
    position:fixed;
}

我上面回答的都是使用jquery.But的正常引导，如果有人在模态中使用角引导

角

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

票数 8

Stack Overflow用户

发布于 2014-08-21 13:48:13

我的解决方案可能有点傻，但它详细说明了我为用例解决这个问题所采取的步骤。

我尝试过类似ritz078 078的回答，但我发现它在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来使重复的代码在我浏览该模式后变得可见，2)每当我单击模式之外时关闭重复代码，以及3)将功能还原到重复模式的“关闭”按钮：

$('#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');
});