语义-ui 模态拉伸window 高度

Question

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

为了避免这种情况，您可以简单地将 'long' class 添加到模式中。我这样做了，但它仍然在拉伸 window 高度。有谁知道为什么会这样，或者我如何调试这种行为？我希望能够滚动我的模态，而无需拉伸 window 高度。

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; }

语义-ui 模态拉伸window 高度

semantic-ui modal stretching window height

jquery

css

semantic-ui