부트스트랩 모달이 열린 상태에서 신체 내용의 스크롤 방지 방법

부트스트랩 모달이 열린 상태에서 신체 내용의 스크롤 방지 방법

Angular UI Bootstrap Modal box를 사용하고 있습니다.모달이 열리면 본체에 스크롤이 생깁니다.모달 뒤에 있는 내용을 스크롤하면 스크롤도 됩니다.

오버플로를 설정할 수 있습니다. 본문 태그에 숨겨지면 문제가 해결됩니다.하지만 내 모달 안에 많은 콘텐츠가 있다면 보여줄 스크롤이 필요합니다.이 스크롤은 모드 안에 있으면 안 됩니다. 즉, 페이지 스크롤을 사용할 때 모드는 스크롤만 해야 하고 내용은 스크롤하지 않아야 합니다.여기 플렁커

드림하이의 답변을 약간 수정한 것이 제게 잘 들어맞았습니다. iOS 기기를 위해 고정된 위치를 추가하는 것이 포함되었습니다.

body.modal-open {
    position: fixed;
    overflow: hidden;
}

뷰포트를 조정하여 사용자 스케일링을 비활성화하여 입력이 자동으로 축소되거나 본문 내용에 스크롤 막대가 표시되지 않도록 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

이 게시물에 대한 크레딧: 부트스트랩 3: 폼 포커스 후 아이폰의 가로 스크롤 바

이 두 가지 변화로 저는 angularjs modal form을 iOS에서 잘 동작할 수 있게 되었습니다.

저는 UI 부트스트랩을 사용하는 것과 같은 문제에 직면해 있으며 일종의 해결책을 생각해 냈습니다.모드를 열 때 클래스를 추가합니다(.ovh오버플로를 숨김으로 설정하는 신체에 적용됩니다.모드를 닫거나 제거할 때 해당 클래스를 제거하여 스크롤을 다시 수행할 수 있습니다.

여기서 당신의 음악을 보세요: http://plnkr.co/edit/OIJ2ee5Ph0ELgkKPrSbr?p=preview

데모 목적으로만 index.html에 클래스를 배치했습니다.게다가 주사를 놓았습니다.$document컨트롤러 정의에서 각도별로 제공된 기준을 사용합니다.

Angular JS와 UI 부트스트랩을 사용하는 사람들을 위해.이것이 제가 그것을 작동시키는 데 필요한 것입니다.제 상황은 좀 달랐습니다.잘 작동하고 스크롤이 잘 되는 모달을 가지고 있었습니다.그 다음에는 다른 모드를 터뜨릴 수 있는 모드의 버튼을 얻었습니다.두 번째 모드가 닫히면 초기 모드가 더 이상 스크롤되지 않습니다.이것으로 끝입니다.

.modal.in {
  overflow-x: hidden;
  overflow-y: auto;
}

저는 CSS 아래에 두었을 뿐이고 이제는 모달 팝업이 열릴 때마다 본문 스크롤이 숨겨집니다.Angular UI Bootstrap을 사용하고 있습니다.

.modal-open {
  overflow: hidden !important;
  position: relative
}

overflow:hidden을 추가하면 배경 페이지 스크롤이 숨겨집니다.그러나 모달 스크롤은 페이지 스크롤로 표시되며 모달은 스크롤하도록 설정됩니다.

body.modal-open {
    overflow: hidden;
}

bootstrap js commented line이 문제를 일으키면 나처럼 이 line을 comment할 수 있습니다.

  this.backdrop(function () {
  var transition = $.support.transition && that.$element.hasClass('fade')

  if (!that.$element.parent().length) {
    that.$element.appendTo(that.$body) // don't move modals dom position
  }

  that.$element
    .show()
    .scrollTop(0)

  if (that.options.backdrop) that.adjustBackdrop()
  that.adjustDialog()

  if (transition) {
    that.$element[0].offsetWidth // force reflow
  }

  that.$element
    .addClass('in')
    .attr('aria-hidden', false)

  //that.enforceFocus()

저는 대화가 닫힐 때 페이지가 스크롤되어 ui-bootstrap-tpls.js 파일을 수정했습니다.실제 문제는 modal을 해제할 때 removeModalWindow가 매개 변수 'modalInstance' 및 'modalWindow.value.modalOpener'로 호출되고 있다는 것입니다.

두 번째 파라미터는 모달 윈도우를 트리거한 요소에 초점을 맞추기 위해 사용되고 있습니다.'해제'와 '닫기 기능'에서 두 번째 파라미터만 제거하면 페이지 스크롤 효과가 해결됩니다.

'removeModalWindow(modalInstance, modalWindow.value.modalOpener)'가 'removeModalWindow(modalInstance)'가 됩니다.

이 코드를 글로벌 스타일로 추가하여 이 문제를 해결했습니다.

.modal-open .modal {
  overflow: hidden;
}

.modal-open{
  height: 100vh;
}

이렇게 할 수도 있고, 모달이 열려있는 상태에서 스크롤을 할 수도 없습니다.

언급URL : https://stackoverflow.com/questions/20563681/how-to-prevent-scrolling-of-the-body-content-when-bootstrap-modal-is-open