[css] 모달 대화 상자가 화면보다 길 때 페이지를 스크롤하는 방법은 무엇입니까?

Program / 글쓴이

내 앱에 y 방향으로 꽤 길어질 수있는 모달 대화 상자가 있습니다. 이로 인해 대화 상자의 일부 내용이 페이지 하단에 숨겨지는 문제가 발생합니다.

여기에 이미지 설명 입력

창 스크롤바가 표시 될 때 대화 상자를 스크롤하고 화면에 맞추기에는 너무 길지만 본체는 모달 뒤에 그대로 둡니다. Trello 를 사용한다면 내가 무엇을 하려는지 알 것입니다.

스크롤바를 제어하기 위해 JavaScript를 사용하지 않고도 가능합니까?

지금까지 모달 및 대화 상자에 적용한 CSS는 다음과 같습니다.

body.blocked {
  overflow: hidden;
}

.modal-screen {
  background: #717174;
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 50;
}

.dialog {
  background: #fff;
  position: fixed;
  padding: 12px;
  top: 20%;
  left: 50%;
  z-index: 10000;
  border-radius: 5px;
  box-shadow: 0, 0, 8px, #111;
}

답변

그냥 사용 

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

모달을 정렬 한 다음 수직 스크롤을 제공합니다.

답변

이것이 나를 위해 고친 것입니다.

max-height: 100%;
overflow-y: auto;

편집 : 이제 모달이 현재 콘텐츠 위에 별도의 페이지처럼 작동하고 스크롤 할 때 모달 뒤의 콘텐츠가 움직이지 않는 트위터에서 현재 사용되는 것과 동일한 방법을 사용합니다.

본질적으로 다음과 같습니다.

var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
$('body').css({
  marginRight: scrollBarWidth,
  overflow: 'hidden'
});
$modal.show();

모달에서이 CSS 사용 :

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;

JSFiddle : https://jsfiddle.net/0x0049/koodkcng/
Pure JS 버전 (IE9 +) : https://jsfiddle.net/0x0049/koodkcng/1/

이것은 페이지 또는 모달 대화 상자의 높이 또는 너비에 관계없이 작동하고, 마우스 / 손가락이 어디에 있든 스크롤을 허용하고, 일부 솔루션은 주요 콘텐츠에서 스크롤을 비활성화하는 흔들리는 점프가 없으며 멋지게 보입니다.

답변

변화 position

position:fixed;
overflow: hidden;

…에

position:absolute;
overflow:scroll;

답변

다음은 내용에 맞게 자동 크기 조정되고 창에 맞지 ​​않을 때 스크롤을 시작하는 모달 창의 데모입니다.

모달 창 데모 (HTML 소스 코드의 주석 참조)

모두 HTML과 CSS로만 수행됩니다 . 모달 창을 표시하고 크기를 조정하는 데 JS가 필요하지 않습니다 ( 물론 창을 표시하는 데 여전히 필요합니다 . 새 버전에서는 JS가 전혀 필요하지 않습니다).

업데이트 (더 많은 데모) :

요점은 외부 및 내부 DIV가 있으며 외부 DIV는 고정 위치를 정의하고 내부 DIV는 스크롤을 생성합니다. (데모에는 실제 모달 창처럼 보이게하는 더 많은 DIV가 있습니다.)

        #modal {
            position: fixed;
            transform: translate(0,0);
            width: auto; left: 0; right: 0;
            height: auto; top: 0; bottom: 0;
            z-index: 990; /* display above everything else */
            padding: 20px; /* create padding for inner window - page under modal window will be still visible */
        }

        #modal .outer {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 999;
        }

        #modal .inner {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: auto;       /* allow to fit content (if smaller)... */
            max-height: 100%;   /* ... but make sure it does not overflow browser window */

            /* allow vertical scrolling if required */
            overflow-x: hidden;
            overflow-y: auto;

            /* definition of modal window layout */
            background: #ffffff;
            border: 2px solid #222222;
            border-radius: 16px; /* some nice (modern) round corners */
            padding: 16px;       /* make sure inner elements does not overflow round corners */
        }

답변

고정 위치 지정만으로도 해당 문제를 해결해야하지만이 문제를 방지하기위한 또 다른 좋은 해결 방법은 모달 div 또는 요소를 사이트 레이아웃이 아닌 페이지 하단에 배치하는 것입니다. 대부분의 모달 플러그인은 사용자가 메인 페이지를 계속 스크롤 할 수 있도록 절대 모달 위치를 지정합니다.

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


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

        </body>
</html>

답변

여기 .. ​​완벽하게 작동합니다.

.modal-body {
    max-height:500px;
    overflow-y:auto;
}

답변

이 CSS를 추가하여 간단하게 할 수 있습니다. 그래서 방금 이것을 CSS에 추가했습니다.

.modal-body {
position: relative;
padding: 20px;
height: 200px;
overflow-y: scroll;
}

작동 중입니다!