发表新帖
发表新帖

How to scroll the page when a modal dialog is longer than the screen?

前端 未结
关注
11 493
时光取名叫无心
时光取名叫无心 2020-12-22 20:42

I have a modal dialog in my app which can get quite long in the y direction. This introduces a problem whereby some of the content of the dialog is hidden off the bottom of

相关标签:
11条回答
  • 情深已故
    2020-12-22 21:05

    I wanted to add my pure CSS answer to this problem of modals with dynamic width and height. The following code also works with the following requirements:

    1. Place modal in center of screen
    2. If modal is higher than viewport, scroll dimmer (not modal content)

    HTML:

    <div class="modal">
    <div class="modal__content">
        (Long) Content
    </div>
</div>

    CSS/LESS:

    .modal {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: @qquad;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.7);
    z-index: @zindex-modal;

    &__content {
        width: 900px;
        margin: auto;
        max-width: 90%;
        padding: @quad;
        background: white;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
    }
}

    This way the modal is always within the viewport. The width and height of the modal are as flexible as you like. I removed my close icon from this for simplicity.

    0 讨论(0)
  • 情书的邮戳
    2020-12-22 21:08

    fixed positioning alone should have fixed that problem but another good workaround to avoid this issue is to place your modal divs or elements at the bottom of the page not within your sites layout. Most modal plugins give their modal positioning absolute to allow the user keep main page scrolling.

    <html>
        <body>
        <!-- Put all your page layouts and elements


        <!-- Let the last element be the modal elemment  -->
        <div id="myModals">
        ...
        </div>

        </body>
</html>
    0 讨论(0)
  • 青春惊慌失措
    2020-12-22 21:08

    Window Page Scrollbar clickable when Modal is open

    This one works for me. Pure CSS.

    <style type="text/css">

body.modal-open {
padding-right: 17px !important;
}

.modal-backdrop.in {
margin-right: 16px; 

</style>

    Try it and let me know

    0 讨论(0)
  • 不知归路
    2020-12-22 21:10

    just use 

    .modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

    it will arrange your modal and then give it an vertical scroll

    0 讨论(0)
  • 臣服心动
    2020-12-22 21:13

    Here.. Works perfectly for me

    .modal-body { 
    max-height:500px; 
    overflow-y:auto;
}
    0 讨论(0)
  • 無奈伤痛
    2020-12-22 21:14

    In the end I had had to make changes to the content of the page behind the modal screen to ensure that it never got long enough to scroll the page.

    Once I did that, the problems I encountered when applying position: absolute to the dialog were resolved as the user could no longer scroll down the page.

    0 讨论(0)
 看不清?
提交回复
热议问题