저는 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가 있습니다. 어두운 배경과 나머지 부분을 참조하십시오.
.modal-open { overflow: auto; padding-right: 0px !important; }@의 ben.kaminski가 완전히 왼쪽으로 문제를 이동 없애는있는 말했듯이. 희망이 도움이됩니다.
왼쪽 이동 문제를 해결하려면 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
.modal { overflow: auto; } .modal-open { overflow: auto; } .modal-open[style] { padding-right: 0px !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");
});
이 작은 수정은 모달이 표시 될 때 스크롤바를 시뮬레이션하여 본문에 오른쪽 여백을 추가합니다.
위의 어느 것도 효과가 없었고 다른 시간의 연구도있었습니다. 그러나 다음 코드는 약간의 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;
}
html, body{
padding-right: 0px !important;
position: relative!important;
}이 코드를 시도해보십시오.
내 CSS 파일에이 코드를 추가하여이 문제를 해결했습니다.
body {
padding-right: 0px !important;
}
Bootstrap 4에서이 문제가 발생했습니다. 문제가 html { overflow-y: scroll; }있다고 생각하지만 .modal-open[style] { padding-right: 0px !important; }로컬 CSS 파일에 추가 하면 모든 것이 완벽하게 작동합니다!
.modal-open[style] {
padding-right: 0px !important;
}padding-right: 0;대신 padding-right: 0px최대 효율
내 페이지는 모달이 표시 될 때 변경되지 않도록 Agni Pradharma 코드의 수정 된 버전이 필요했습니다. 고정 탐색 헤더와 스크롤이있는 일부 페이지가 있고 일부는 없습니다. 여기 데모 : http://jsbin.com/gekenakoki/1/
두 CSS를 모두 사용했습니다.
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}
및 스크립트 :
$(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);
};
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;
}
들어 부트 스트랩-4.3.x에서 다음과 같은 CSS를 사용 :
.modal-open {
padding-right: 0 !important;
}
/* if you have .navbar in your page then add padding-right for your .navbar (default is 16px) */
.modal-open .navbar {
padding-right: 16px !important;
}
그게 다야. 몇 가지를 추가하는 자바 스크립트 코드 : 다른 건처럼 필요하지 않습니다 .class당신의 body스타일에 다음 추가 CSS 코드를.
부트 스트랩 모달이 열리면 .modal-open 클래스가 body 태그로 설정됩니다. 이 태그에서 overflow : hidden이 설정됩니다. 우리는 이것을 바꿔야합니다. CSS에 아래 코드를 추가하세요.
<style>
body.modal-open {
overflow: visible !important;
}
</style>
누군가가 react-bootstrap솔루션을 사용 하는 react-bootstrap경우 인라인 스타일을 body요소에 적용 하여 overflow및 padding스타일 을 조작 하기 때문에 조금 더 복잡 합니다. 즉, 해당 인라인 스타일을!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;
}
참고 :overflow스타일의주석 처리를 제거하여 스크롤링을 활성화하지 않으면 (예 : 스크롤바 표시)페이지 콘텐츠가 스크롤바 너비만큼 이동하는 것처럼 보입니다 (스크롤바가 이전에 표시되었던 경우).
내 Jquery 솔루션 :
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'));
});