Question

我在此页面上看到：http://semantic-ui.com/modules/modal.html#/examples

要避免这种情况，您可以简单地将“long”类添加到模态中。我做到了这一点，但仍然拉伸窗户高度。有没有人有任何想法为什么会这样，或者我如何调试这种行为？我希望能够滚动我的模态，而不会拉伸窗口高度。

Answer 1

这是可能的

$('.modal-btn').click(function(){
    $('.modal-content').show();
});
$('.modal-btn-close').click(function(){
    $('.modal-content').hide();
});

.modal-btn{color:red; cursor:pointer;}

.modal-content{
    overflow-y:scroll;
    display:none;
    position:fixed; 
    top:0px; left:0px;
    width:100%; height:100%;
    background-color:rgba(0,0,0,0.2);
}

.modal-content div{ background-color:#FFF; box-shadow:0px 0px 5px rgba(0,0,0,0.2); border-radius:20px; padding:20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Run This Code <span class="modal-btn">Click Me !!!</span>

<div class="modal-content">
    <div style="margin:30px; min-height:1000px;">
        Long Content
        <hr/>
        <span class="modal-btn-close">hide me</span>
    </div>
</div>

Answer 2

对于将来遇到此问题的任何人，我最终使用的解决方法只是添加此css规则：

body{ max-height: 100vh; }

语义模态拉伸窗口高度

2 个答案: