모달 창이 열려 있을 때 본문 스크롤을 방지하는 방법은 무엇입니까?

모달이 열려 있을 때 본문 스크롤 방지

문제 설명:

http://twitter.github.com/bootstrap에서 모달을 사용하는 경우 , 마우스 휠을 사용할 때 본체가 계속 스크롤됩니다. 이를 방지하려면 어떻게 해야 합니까?

시도한 해결 방법:

$(window).scroll 및 $(window).live('scroll')를 사용하여 스크롤을 방지하기 위해 JavaScript를 사용하려는 시도는 실패했습니다. .

Bootstrap 지원:

Bootstrap은 모달 대화 상자가 표시될 때 본문에 modal-open 클래스를 도입했습니다. 이 클래스는 CSS를 통한 스크롤을 방지하는 데 사용할 수 있습니다.

<code class="css">body.modal-open {
    overflow: hidden;
}</code>

현재 상황(2013년 2월 8일 업데이트):

이 솔루션은 더 이상 Twitter Bootstrap v. 2.3.0에서 작동하지 않습니다. modal-open 클래스는 본문에 추가되지 않습니다.

현재 해결 방법:

모달이 표시될 때와 숨겨질 때 각각 다음을 사용하여 본문에 modal-open 클래스를 추가하고 제거합니다. 다음 JavaScript:

<code class="javascript">$("#myModal").on("show", function() {
    $("body").addClass("modal-open");
}).on("hidden", function() {
    $("body").removeClass("modal-open");
});</code>

향후 업데이트(2013년 3월 11일):

Modal-open 클래스는 스크롤 방지라는 명시적인 목적으로 Bootstrap 3.0에서 반환될 예정입니다.

<code class="css">/* Enable Body overflow hidden */
.modal {
    ...
    /* support for transition.* to transition .bs-modal-backdrop and .bs-modal-content */
    -webkit-transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
    /* modal container size */
    width: 560px;
    margin: 20px auto;
    padding: 0;
    border: 0;
    border-radius: 6px;
    /* background color; best with border-radius for dialog box effect */
    /* fallback for IE7-8 */
    background-color: #ffffff;
    /* IE9+ */
    background-clip: padding-box;
    /* fade in effect; (speed/timing via CSS animation) */
    opacity: 1;
 }
/* body overflow hidden */
body.modal-open {
    overflow: hidden;
}</code>

위 내용은 모달 창이 열려 있을 때 본문 스크롤을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!