내 웹 사이트 에서 Modal ( http://twitter.github.com/bootstrap )을 여는 동안 마우스 휠을 사용할 때 몸이 스크롤을 멈추기를 원합니다 .
모달이 열렸을 때 아래의 자바 스크립트를 호출하려고했지만 성공하지 못했습니다.
$(window).scroll(function() { return false; });과
$(window).live('scroll', function() { return false; });우리 웹 사이트에서 IE6에 대한 지원이 중단되었으므로 IE7 +는 호환되어야합니다.
답변
부트 스트랩 은 모달 대화 상자가 표시되면 본문에 modal클래스 modal-open를 자동으로 추가 하고 대화 상자가 숨겨지면 제거합니다. 따라서 CSS에 다음을 추가 할 수 있습니다.
body.modal-open {
overflow: hidden;
}위의 코드는 Bootstrap CSS 코드베이스에 속한다고 주장 할 수 있지만 사이트에 추가하기 쉬운 수정입니다.
2013 년 2 월 8 일 업데이트
이제 Twitter Bootstrap v. 2.3.0에서 작동이 중지되었으며 더 이상 modal-open본문에 클래스가 추가되지 않습니다 .
해결 방법은 모달이 표시 될 때 본문을 클래스에 추가하고 모달이 닫힐 때 클래스를 제거하는 것입니다.
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});2013 년 3 월 11 일 업데이트modal-open 스크롤을 방지하기 위해 클래스가 Bootstrap 3.0에서 반환되는
것처럼 보입니다 .
몸에 .modal-open을 다시 도입합니다 (그래서 스크롤을 할 수 있습니다)
이 참조 https://github.com/twitter/bootstrap/pull/6342 상기 봐 – 모달 절을 참조하십시오.
답변
허용 된 답변이 모바일 (iOS 7 w / Safari 7 이상)에서 작동하지 않으며 CSS가 실행될 때 내 사이트에서 MOAR JavaScript를 실행하고 싶지 않습니다.
이 CSS는 배경 페이지가 모달에서 스크롤되는 것을 방지합니다.
body.modal-open {
overflow: hidden;
position: fixed;
}그러나 본질적으로 맨 위로 스크롤하는 약간의 부작용이 있습니다. position:absolute이 문제를 해결하지만 모바일에서 스크롤하는 기능을 다시 소개합니다.
뷰포트 ( 뷰포트를 추가하기위한 플러그인)를<body> 알고 있다면 에 대한 CSS 토글을 추가 할 수 있습니다 position.
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}또한 모달을 표시하거나 숨길 때 기본 페이지가 왼쪽 / 오른쪽으로 점프하지 않도록 이것을 추가합니다.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}답변
본문이 넘치면 본문이 스크롤되지 않습니다. 모달을 숨기면 자동으로 되돌립니다.
코드는 다음과 같습니다.
$('#adminModal').modal().on('shown', function(){
$('body').css('overflow', 'hidden');
}).on('hidden', function(){
$('body').css('overflow', 'auto');
})답변
overflow : 모달이 열려 있으면 숨겨져 서 본문 크기를 창 크기로 설정해 볼 수 있습니다.
답변
@charlietfl의 답변을 넘어 스크롤 막대를 고려해야합니다. 그렇지 않으면 문서 리플 로우가 나타날 수 있습니다.
모달 열기 :
body폭을 기록- 세트
body에 오버 플로우hidden -
본문 너비를 1 단계의 너비로 명시 적으로 설정하십시오.
var $body = $(document.body); var oldWidth = $body.innerWidth(); $body.css("overflow", "hidden"); $body.width(oldWidth);
모달 닫기 :
- 세트
body에 오버 플로우auto -
설정
body에 폭autovar $body = $(document.body); $body.css("overflow", "auto"); $body.width("auto");
고무시키는 : http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
답변
경고 : 아래 옵션은 Bootstrap v3.0.x와 관련이 없습니다. 해당 버전의 스크롤은 모달 자체에 명시 적으로 제한되어 있기 때문입니다. 휠 이벤트를 비활성화하면 일부 사용자가 뷰포트 높이보다 높은 높이의 모달로 콘텐츠를 보지 못하게 될 수 있습니다.
또 다른 옵션 : 휠 이벤트
스크롤 이벤트는 취소 할 수 없습니다. 그러나 마우스 휠 및 휠 이벤트 를 취소 할 수 있습니다. 가장 큰 경고는 모든 레거시 브라우저가이를 지원하지는 않는다는 것입니다. Mozilla는 최근 Gecko 17.0에서 후자를 지원합니다. 나는 전체 스프레드를 모르지만 IE6 +와 Chrome은 그것들을 지원합니다.
활용 방법은 다음과 같습니다.
$('#myModal')
.on('shown', function () {
$('body').on('wheel.modal mousewheel.modal', function () {
return false;
});
})
.on('hidden', function () {
$('body').off('wheel.modal mousewheel.modal');
});JSFiddle
답변
/* =============================
* Disable / Enable Page Scroll
* when Bootstrap Modals are
* shown / hidden
* ============================= */
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function theMouseWheel(e) {
preventDefault(e);
}
function disable_scroll() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', theMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = theMouseWheel;
}
function enable_scroll() {
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', theMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = null;
}
$(function () {
// disable page scrolling when modal is shown
$(".modal").on('show', function () { disable_scroll(); });
// enable page scrolling when modal is hidden
$(".modal").on('hide', function () { enable_scroll(); });
});