Bootstrap에서 모달을 사용할 때 본문 스크롤을 방지하는 방법은 무엇입니까?

모달 표시 중 본문 스크롤 방지

Twitter Bootstrap 프레임워크에서 Modal을 사용하는 경우 모달 대화 상자가 열려 있습니다. 이는 사용자에게 실망스러울 수 있습니다.

솔루션

Bootstrap은 모달이 표시될 때 본문에 "modal-open" 클래스를 자동으로 추가합니다. 스타일시트에 CSS 규칙을 추가하면 이 기능을 활용할 수 있습니다.

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

이렇게 하면 모달이 열려 있을 때 본문 스크롤이 방지됩니다.

부트스트랩 버전 고려 사항

이 솔루션은 Bootstrap 버전에 따라 제한 사항이 있습니다.

• Bootstrap 2.3.0 이상: Twitter Bootstrap은 "modal-open"을 제거했습니다. " 클래스를 이 버전의 본문에서 가져옵니다.

  • 해결 방법: 모달이 열릴 때 클래스를 수동으로 추가하고 닫힐 때 제거할 수 있습니다. 이는 다음과 같이 jQuery를 사용하여 달성할 수 있습니다.

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

• Bootstrap 3.0: "modal-open" 클래스는 버전 3.0에서 명시적으로 반환될 것으로 예상됩니다.

IE 호환성

아시다시피 솔루션은 IE7과 호환됩니다.

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