semantic-ui modal stretching window height

问题

I see on this page: http://semantic-ui.com/modules/modal.html#/examples

That to avoid this you can simple add the 'long' class to the modal. I did this but it still is stretching the window height. Does anyone have any ideas why this would be, or how I can debug this behavior? I want to be able to scroll my modal, without having it stretch the window height.

回答1:

this is possible

http://jsfiddle.net/MrLogical/2hda8e18/

$('.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>

回答2:

For anyone who runs into this in the future, the workaround that I ended up using was just to add this css rule:

body{ max-height: 100vh; }

来源：https://stackoverflow.com/questions/29425389/semantic-ui-modal-stretching-window-height

标签

jquery

css

semantic-ui