내 페이지에서 모달보기를 트리거하면 스크롤 막대가 사라집니다. 모달이 움직이거나 사라질 때 배경 페이지가 움직이기 시작하기 때문에 성가신 효과입니다. 그 효과에 대한 치료법이 있습니까?
답변
이것은 기능입니다. 클래스 modal-open는 body모달을 표시 할 때 HTML에 추가되고 숨기면 제거됩니다.
이렇게하면 부트 스트랩 CSS가 다음과 같이 스크롤바가 사라집니다.
.modal-open {
overflow: hidden;
}다음을 지정하여이를 재정의 할 수 있습니다.
.modal-open {
overflow: scroll;
}에서 자신의 CSS.
답변
모달을 열면 항상 스크롤로 열리기 때문에 상속 이 스크롤 보다 낫다고 생각 하지만 스크롤이 없으면 같은 문제가 발생합니다. 그래서 저는 이렇게합니다.
.modal-open {
overflow: inherit;
}답변
나는 사용했다
.modal-open {
overflow-y: scroll;
}이 경우 가로 스크롤 막대를 표시하지 않습니다.
답변
overflow-y : scroll을 사용하고 본문에서 패딩을 제거하는 것이 더 낫습니다. 부트 스트랩 모달은 페이지 본문에 패딩을 추가했습니다.
.modal-open {
overflow:hidden;
overflow-y:scroll;
padding-right:0 !important;
}IE 브라우저 호환 : 기본적으로 동일한 작업을 수행하는 IE 브라우저.
답변
이 게시물을 건너서 하나님 감사합니다! 내 자신의 닫기 링크를 사용하여 창을 닫을 때 스크롤바를 되 돌리는 방법을 찾으려고 머리를 뽑아 내고있었습니다. CSS에 대한 제안을 시도했지만 제대로 작동하지 않았습니다. 읽고 나서
modal-open 클래스는 모달을 표시 할 때 HTML 본문에 추가되고 숨길 때 제거됩니다. -@flup
jquery를 사용하여 해결책을 찾았으므로 다른 사람이 동일한 문제를 가지고 있고 위의 제안이 작동하지 않는 경우를 대비하십시오.
<script>
jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
jQuery('body').removeClass('modal-open');
});
});
</script>답변
저는 Bootstrap 모달의 ‘기능’을 가지고 놀았습니다. 보인다 .modal클래스가있다overflow-y:auto; 모달 자체가 높게 될 때 모달 래퍼가 자신의 스크롤 막대를 얻을 수 있도록.
항상 스크롤바를 원하는 경우 (디자이너가 자주 사용) 먼저 본문 설정
body {
overflow-y:scroll;
}그런 다음 처리 .modal-open
.modal-open .modal {
overflow-y:scroll; /* Force a navbar on .modal */
}
.modal-open .topnavbar-wrapper {
padding-right:17px; /* Noticed that right aligned navbar content got overlapped by the .modal scrollbar */
}이 경우 본문에서 스크롤바를 비활성화 한 상태로 둡니다.
이 페이지의 다른 모든 답변은 계속해서 내 콘텐츠를 뛰어 넘었습니다.
주의!
이 솔루션이 항상 저에게 효과가 있었지만 어제 모달을 드래그 할 수 있고 화면에 맞게 크게 할 때이 수정을 사용하는 데 문제가있었습니다 (세로). position:sticky내가 추가 한 요소 와 관련이있을 수 있습니까?
답변
부 트랩의 특정 부분을 사용자 정의하기 위해 자신의 CSS 파일을 만드는 것이 좋습니다.
페이지의 다른 부분에서 사용하면 부트 스트랩의 모든 내용이 변경되므로 부트 스트랩의 css 파일을 변경하지 마십시오.
페이지가 다소 길면 자동으로 스크롤 막대를 제공합니다. 모달이 열리면 부트 스트랩이 기본값으로 수행하는 작업이므로 스크롤 막대를 숨 깁니다.
모달이 열릴 때 숨기지 않으려면 자신의 CSS 파일에 CSS 코드 (아래)를 넣어 무시하면됩니다.
.modal-open {
overflow: scroll;
}그 반대의 경우도 마찬가지입니다 …
.modal-open {
overflow: hidden;
}