[javascript] 부트 스트랩 모달 : 토글시 배경이 맨 위로 이동

Program / 글쓴이

모달에 문제가 있습니다. 페이지에 모달을 토글하는 버튼이 있습니다. 모달이 나타나면 페이지가 맨 위로 이동합니다.

해결책 / 등을 찾기 위해 할 수있는 모든 것을 다했지만 정말 길을 잃었습니다.

편집하다:

나는 또한 시도해 보았지만 $('#myModal').modal('show');똑같은 효과가 있습니다.

답변

모달이 열리면 modal-open클래스가 <body>태그 로 설정됩니다 . 이 클래스는 overflow: hidden;본문으로 설정 됩니다. 이 규칙을 스타일 시트에 추가하여 bootstrap.css 스타일을 재정의합니다.

body.modal-open {
    overflow: visible;
}

이제 두루마리가 제자리에 있어야합니다.

답변

태그로 모달을 호출하는 경우. href 속성에서 ‘#’을 제거하고 데이터 속성으로 모달을 호출하십시오.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

답변

이 같은 앵커 태그를 사용하는 경우 <a href"#" ..> ... </a>와 href="#"문제를 만드는, 즉를 제거합니다. 여기에서 더 많은 것을 읽을 수 있습니다.

답변

$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

이렇게하면 스크롤 막대가 맨 위에 올라가는 것을 막을 수 있습니다.

답변

코드 어딘가에 중첩 된 모달로 작업 할 수 있습니다.

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

나에게 그것은 위치, 높이 및 오버플로의 조합이었습니다.

답변

특정 오류가 표시되지는 않지만 html 구문 을 확인하는 것이 좋습니다 .

소스를 사용한 작은 테스트는 다음과 같은 오류를 제공합니다.

127 행, 34 열 : 닫히지 않은 요소 div.

              <div class="inner onlySides">

이것은 문제가 될 수 있습니다.

답변

점프 배경을 해결하는 가장 쉬운 방법은 두 개의 매개 변수를 정의하는 것입니다.

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}