logo标签列表

在可滚动的模态框中，固定位置的Div

jqueryhtmlcsstwitter-bootstrap
6
我在一个弹窗中有一个带滚动条的 div，它应该相对于浏览器窗口具有固定位置，并且不应随弹窗一起滚动。 我尝试了使用 position:fixed，但是它不起作用。您可以在此处查看其上下文中存在的问题： 

$('.launchConfirm').on('click', function (e) {
    $('#confirm').modal({
        show: true
    });
});
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="page-container">
    <div class="container">
        <br />
        <button type="button" class="btn launchConfirm">Open modal</button>
    </div>
</div>
<div class="modal fade" id="confirm">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <div style="position:fixed;top:40px;left:10px;background-color:red">This div should be fixed<br>and should not scroll away.</div>
            </div>
            <div class="modal-footer">
                some random buttons
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

我该如何修复那个div？
@Dejan.S 固定的 div 将包含与模态框中的表单相关的一些按钮，目前这些按钮位于底部。 - neptune
5个回答
6
你需要将DIV移出模态框。
固定定位与viewport相关，但当祖先元素应用了transform时除外。.modal-dialog应用了transform，创建了一个新的上下文来定位DIV（这就是为什么你的DIV留在了模态框内部）。 CSS Positioning - MDN
1
他是正确的。尝试将那个DIV放在<div class="modal-dialog>...</div>下面。它应该可以工作。 - Ukasha
4
您可以像这样使用。 

$('.launchConfirm').on('click', function (e) {
    $('#confirm').modal({
        show: true
    });
});
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' );
.modal-open .modal {
   overflow: hidden;
 }
 .modal-body {
   height: calc(100vh - 126px);
   overflow-y:scroll;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="page-container">
    <div class="container">
        <br />
        <button type="button" class="btn launchConfirm">Open modal</button>
    </div>
</div>
<div class="modal fade" id="confirm">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <div style="position:fixed;top:40px;left:10px;background-color:red">This div should be fixed<br>and should not scroll away.</div>
            </div>
            <div class="modal-footer">
                some random buttons
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

我不需要标题被固定。虽然，你给了我一个想法并成功解决了问题。谢谢。 - neptune
2

根据@Shiplo Rahman和@Dejan.S的回答，我成功解决了问题。

移除了modal-header，将所有内容放在modal-body中，并使用这里描述的jQuery解决方法：jQuery: Fix div when browser scrolls to it

$('.launchConfirm').on('click', function (e) {
    $('#confirm').modal({
        show: true
    });
});

jQuery(function($) {
  function fixDiv() {
    var $cache = $('#getFixed');
    if ($('.modal-body').scrollTop() > 50)
    {
    $cache.css({
        'position': 'fixed',
        'top': '0px',
        'left': '25px',
        'width': '600px'
      });
    }
    else
      $cache.css({
        'position': 'relative',
        'top': 'auto',
        'left': '10px'
      });
  }
  $('.modal-body').scroll(fixDiv);
  fixDiv();
});
    @import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' );
.modal-open .modal {
   //overflow: hidden;
 }
 .modal-body {
   height: calc(100vh - 126px);
   overflow-y: scroll;
 }
 
 #getFixed {
   position: relative;
   left: 10px;
   width: 600px;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


<div class="page-container">
    <div class="container">
        <br />
        <button type="button" class="btn launchConfirm">Open modal</button>
    </div>
</div>
<div class="modal fade" id="confirm">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body" id="confirm2">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="modal-title">Modal title</h4>
                 <div id="getFixed" style="background-color:red">This div should be fixed<br>and should not scroll away.</div>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                some random buttons
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

这是源代码: http://jsfiddle.net/roahda03/21/
2

to have a fixed div in a modal, do this:

<div class="modal fade" role="dialog">

    <div class="fixed-div">
        *your fixed div here...
        it can even be your .modal-header div*
    </div>

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">

CSS:

.fixed-div {
    width: 100%;
    position: fixed;
    z-index: 1051; /* anything above 1050*/
    background: #fff;
    box-shadow: 0 5px 20px 4px rgba(0,0,0,.1);
}

.fixed-div也可以作为你的.modal-header; 但是.modal-header必须在.modal之后，而不是在.modal-content之后。

最初的回答：使用.fixed-div作为.modal-header；确保.modal-header在.modal之后，而不是在.modal-content之后。
1050怎么了？ - AlxVallejo
Bootstrap模态框的z-index值为1050。如果您想让任何元素保持在模态框的顶部可见，您必须使用高于1050的z-index值。 - Wale
-1
在模态框的主体中，您应该设置一个最大高度，然后告诉它溢出，如下所示：
.modal-body{
    overflow: auto;
    max-height: 200px;
}
我不想让标题固定，只想让div固定。 - neptune
啊，好的，那么你应该将 div 放在模态框之外，或者至少放在 .modal-content div 之外。 - kiwi1342
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接