부트 스트랩 3 모달이 실행되고 페이지가 일시적으로 왼쪽으로 이동 함 / 브라우저 스크롤바 문제
저는 Bootstrap 3.1.0을 사용하는 사이트에서 작업하고 있습니다.
모달 창이 열리면 브라우저 스크롤 막대가 잠시 사라졌다가 다시 돌아옵니다. 닫을 때도 마찬가지입니다.
브라우저 스크롤 막대 상호 작용없이 열리고 닫히도록 어떻게 만들 수 있습니까? 사람들이 문제를 겪고있는 스택의 게시물을 보았지만 내 문제에 대한 구체적인 답변을 찾을 수 없으므로 다른 사람이이 요청을했고 누군가가이 요청에 대해 알고 있고 저를 연결하고 싶어한다면 감사하겠습니다. 그것. 게시하기 전에 약 2 시간 동안 검색했습니다.
이것은 내가이 문제에 대해 검색 할 때 github에서 찾은 것이고 나를 위해 잘 작동합니다.
js :
$(document).ready(function () {
$('.modal').on('show.bs.modal', function () {
if ($(document).height() > $(window).height()) {
// no-scroll
$('body').addClass("modal-open-noscroll");
}
else {
$('body').removeClass("modal-open-noscroll");
}
});
$('.modal').on('hide.bs.modal', function () {
$('body').removeClass("modal-open-noscroll");
});
})
css 는 nav-fixed-top 및 navbar-fixed-bottom 이있는 경우이 CSS를 사용합니다 .
body.modal-open-noscroll
{
margin-right: 0!important;
overflow: hidden;
}
.modal-open-noscroll .navbar-fixed-top, .modal-open .navbar-fixed-bottom
{
margin-right: 0!important;
}
또는 navbar-default가있는 경우이 CSS를 사용하십시오.
body.modal-open-noscroll
{
margin-right: 0!important;
overflow: hidden;
}
.modal-open-noscroll .navbar-default, .modal-open .navbar-default
{
margin-right: 0!important;
}
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}
그것을 제거 할 것입니다. 모달이 더 반응 적으로 작동하도록 추가되었으므로 화면이 너무 짧은 경우 아래로 스크롤하여 모달을 볼 수 있습니다. 또한 모달이 작동하는 동안 배경이 스크롤되지 않도록합니다. 해당 기능이 필요하지 않으면 내가 게시 한 CSS를 사용할 수 있습니다.
추가 정보 : 본문에 .modal-open을 설정하여 본문의 모든 스크롤을 방지하고 본문 스크롤 막대를 숨 깁니다. 그런 다음 모달이 나타나면 전체 화면을 차지하는 어두운 배경이 있고 overflow-y가 있습니다. 스크롤 막대를 강제로 다시 표시하므로 모달 확장이 화면 하단을 지나도 여전히 스크롤 할 수 있습니다. 어두운 배경과 나머지 부분을 참조하십시오.
왼쪽 이동 문제를 해결하려면 CSS 만 사용하면됩니다.
.modal-open[style] {
padding-right: 0px !important;
}
코드에있는 인라인 스타일을 덮어 쓰는 것입니다. 나는 WordPress 빌드에서 내 것을 사용하고 있으며 인라인 스타일이 본문에 적용되었습니다. 다음과 같이 보였습니다.
<body class="home blog logged-in modal-open" style="padding-right: 15px;">
이것이 누군가를 돕기를 바랍니다!
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}
.modal-open[style] {
padding-right: 0px !important;
}
ben과 cjd에게 감사드립니다.
위의 코드는 나를 위해 작동하는 것 같습니다.
이것은 부트 스트랩에보고 된 문제입니다 : https://github.com/twbs/bootstrap/issues/9855
그리고 이것은 내 임시 빠른 수정이며 자바 스크립트 만 사용하여 고정 상단 탐색 모음을 사용하여 작동합니다. 페이지와 함께이 스크립트를로드하십시오.
$(document.body)
.on('show.bs.modal', function () {
if (this.clientHeight <= window.innerHeight) {
return;
}
// Get scrollbar width
var scrollbarWidth = getScrollBarWidth()
if (scrollbarWidth) {
$(document.body).css('padding-right', scrollbarWidth);
$('.navbar-fixed-top').css('padding-right', scrollbarWidth);
}
})
.on('hidden.bs.modal', function () {
$(document.body).css('padding-right', 0);
$('.navbar-fixed-top').css('padding-right', 0);
});
function getScrollBarWidth () {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
다음은 작업 예제입니다. http://jsbin.com/oHiPIJi/64
navbar를 고정하고 모달이 열릴 때 본문을 맨 위로 스크롤하지 않으려면이 스타일을 사용하십시오.
.modal-open {
overflow: visible;
}
.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
padding-right:0px!important;
}
이 페이지의 어떤 항목도 버전 3.3.4 및 3.3.5에서 저에게 효과가 없었습니다.이 CSS를 추가하면 문제가 해결되었습니다.
body {
padding-right:0px !important;
margin-right:0px !important;
}
페이지가 오른쪽으로 이동하는 문제를 해결하려면
html, body{
padding: 0 !important;
}$('body').on('show.bs.modal', function () {
if ($("body").innerHeight() > $(window).height()) {
$("body").css("margin-right", "17px");
}
});
$('body').on('hidden.bs.modal', function (e) {
$("body").css("margin-right", "0px");
});
이 작은 수정은 모달이 표시 될 때 스크롤바를 시뮬레이션하여 본문에 오른쪽 여백을 추가합니다.
이 솔루션은 나를 위해 작동합니다 !!!!
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}
.modal-open[style] {
padding-right: 0px !important;
}
위의 어느 것도 효과가 없었고 다른 시간의 연구도있었습니다. 그러나 다음 코드는 약간의 CSS만으로 완벽하게 작동했습니다. 위는 인라인 스타일 padding : 17px를 제거하지 않습니다. JS 또는 jquery를 사용하면 0 패딩을 추가 할 수 있지만 효과가 없습니다.
.modal-open {
padding-right: 0px !important;
overflow-y: scroll;
width: 100%;
display: block;
}
.modal {
position: fixed;
top: 0;
left: 0;
z-index: 1050;
display: none;
width: 100%;
height: 100%;
outline: 0;
padding-right: 0 !important;
}
제 경우에는 body 태그가 이미 overflow:hidden.
모달 대화 상자가 열리면 padding-right:17px;본문 에도 추가 됩니다.
여기 내 코드
.modal-open {
overflow: hidden!important;
padding-right:0!important
}
html, body{
padding-right: 0px !important;
position: relative!important;
}이 코드를 시도해보십시오.
Bootstrap 3.3.2부터는 대화 상자가 표시 될 때 스크롤 막대가 제거되고 Bootstrap이 이전에 스크롤 막대가 차지한 공간을 보완하기 위해 body 요소에 오른쪽 패딩을 추가하는 동작이 나타납니다. 불행히도 이것은 적어도 최신 버전의 Chrome, IE, Firefox 또는 Safari에서 화면 이동을 방지하지 않습니다. 여기에있는 수정 중 어느 것도이 문제를 완전히 수정하지는 않지만 ben.kaminski의 답변과 cjd82187의 답변 중 일부를 결합하면 CSS만으로 문제가 해결됩니다.
/* removes inline padding added by Boostrap that makes the screen shift left */
.modal-open[style] {
padding-right: 0px !important;
}
/* keeps Bootstrap from removing the scrollbar if it's there */
.modal-open {
overflow: auto;
}
ben.kaminski가 언급했듯이이 코드는 Twitter Bootstrap에 추가되었으므로 화면 하단에있는 경우 스크롤하여 모달을 볼 수 있습니다. 이 기능을 유지하려면 다음과 같이 큰 뷰포트에만 적용되도록 미디어 쿼리에 CSS 솔루션을 래핑 할 수 있습니다.
@media (min-width: 992px) {
.modal-open[style] {
padding-right: 0px !important;
}
.modal-open {
overflow: auto;
}
}
이 간단한 솔루션 구현
.modal-open {
padding-right: 0 !important;
}
html {
overflow-y: scroll !important;
}
When the bootstrap modal opens then .modal-open class is set to body tag. In this tag overflow:hidden is set. we have to change this. Add the below code in your CSS.
<style>
body.modal-open {
overflow: visible !important;
}
</style>
Reference :- How to fix Bootstrap modal background scroll to top
My page needed a modified version of Agni Pradharma's code to keep it from shifting when the modal was shown. I have a fixed nav header and some pages with scroll, some without. Demo here: http://jsbin.com/gekenakoki/1/
I used both the css:
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}
and the script:
$(document.body)
.on('show.bs.modal', function () {
if (this.clientHeight <= window.innerHeight) {
return;
}
// Get scrollbar width
var scrollbarWidth = getScrollBarWidth();
if (scrollbarWidth) {
$(document.body).css('padding-left', scrollbarWidth);
}
})
.on('hidden.bs.modal', function () {
$(document.body).css('padding-left', 0);
});
function getScrollBarWidth () {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
if anyone happens to be using react-bootstrap the solution is just a bit more complex because react-bootstrap applies inline styles to the body element to manipulate the overflow and padding styles. This means you must override those inline styles with !important
body.modal-open {
// enable below if you want to additionally allow scrolling with the modal displayed
// overflow: auto !important;
// prevent the additional padding from being applied
padding: 0 !important;
}
NOTE: if you do not enable scrolling (i.e. make the scrollbar visible) by uncommenting the overflow style, then your page content will appear to shift over by the scrollbar width (if the scrollbar was previously visible that is).
My Jquery solution:
var nb = $('nav.navbar-fixed-top');
$('.modal')
.on('show.bs.modal', function () {
nb.width(nb.width());
})
.on('hidden.bs.modal', function () {
nb.width(nb.width('auto'));
});
For Bootstrap version 3.2.0 this lines in css file fill fix the error:
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
padding-right: 17px;
}
Solution found here
The best solution for me was use this settings. It works for web and mobile
.modal-open {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
}
'Nice programing' 카테고리의 다른 글
| Swift에서 배열 요소별로 그룹화하는 방법 (0) | 2020.11.12 |
|---|---|
| UITableView에서 UITableViewCells 사이의 줄 삭제 (0) | 2020.11.12 |
| SBT 오류 :“터미널을 구성하지 못했습니다. (0) | 2020.11.12 |
| Ruby에서 초기화 생성자를 오버로드하는 방법이 있습니까? (0) | 2020.11.11 |
| 기본 인증을위한 사용자 계정은 어떻게 생성합니까? (0) | 2020.11.11 |