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

111

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

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

편집하다:

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

javascript  jquery  css  twitter-bootstrap  twitter-bootstrap-3 
— FooBar
소스
안녕, 베니. 예, 저는 도전적입니다. 나는 또한 시도했다 : $ ( '# myModal'). modal ( 'show'); 하지만 똑같은 효과가 있습니다.
— FooBar
1
이것이 도움이 될 수 있습니까, 같은 문제 : stackoverflow.com/questions/12894570/…
— Mark
@ 마크는 ... 내 대답은 아래를 참조
— Ravimallya
window모달 에서 아무 곳이나 클릭 하면 모달이 실행된다는 것을 알았습니다 . 그것은 예상치 못한 이상하게 보입니다. buttonvia devtools를 제거하고 페이지의 아무 곳이나 클릭하면 여전히 모달 창이 열립니다. 그게 원하는 행동 이었습니까? 모달 클릭 이벤트에 대한 올바른 선택기가 없는지 궁금합니다.
— dward

답변:

174

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

body.modal-open {
    overflow: visible;
}

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

— pstenstrm
소스
@pstenstrm, 의심이 있습니다. .modal-open 클래스에 대한 CSS를 재정의하도록 지시했습니다. 그러나 추가 마감 div가 있고 내 대답에서 내 해상도의 클래스를 재정의하지 않은 경우 어떻게됩니까? 2 개의 추가 div를 제거한 후 제대로 작동합니다. bs 모달 추가 .modal-backdrop div 추가 닫는 태그로 인해 닫아야하는 위치에서 혼란스러워집니다.
— Ravimallya 2014
4
나를 위해 작동하지 않습니다, iframe 내부에 모달이 있고 맨 위로 스크롤됩니다 ... 어떤 아이디어가 있습니까?
— Cabuxa.Mapache 2014
5
이것은 나를 위해 그것을 고쳤습니다. 내 문제의 근원을 추가하는 것은 'body {height : 100 %}'였습니다.
— PeteG 2014
23
나를 위해 일하지 않습니다. 여는 바닐라 모달이 있는데 .modal('show')여전히 페이지 상단으로 스크롤됩니다. Bootstrap v3.2.0
— MandM 2014 년
6
나는 position: inherit이 수업 에 추가 해야했지만 그 후에는 매력처럼 일했다.
— adrian3martin
28

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

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
— 고칸
소스
나는 당신이 거기에 게시 한 것과 똑같이 그것을 엽니 다. 링크를 확인하십시오
— FooBar
5
"<button>"을 사용하지 않고 <a>를 사용하면 제 경우와 같이 개체에서 마우스 커서를 움직일 때 "손가락 버튼"아이콘이 사라집니다. 이를 극복하기 위해, 나는 이렇게 한 ... HREF = 데이터 토글 = "모달" "#이 mai_modal_id"... 내가 데이터를 대상 사용하지 않은
— pagurix
3
@pagurix-귀하의 의견은 내 시나리오에 가장 적합했습니다.
— AlfredBr 2016 년
@pagurix는 별도의 답변으로 자신의 의견을 작성해야한다고 생각합니다. 도움이 된 유일한 것. 엄지 척!
— Vibhor Dube
14

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

— 니 메시자인
소스
12 
$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

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

— 게오르기 미르 체프
소스
5

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

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

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

— 데니스 하이덴
소스
4

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

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

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

              <div class="inner onlySides">

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

— 빌리 조
소스
감사합니다-이 문제를 조사 할 것입니다-이것이 내가 겪고있는 문제를 유발할 수 있다고 믿기 어렵지만 플러그인을 사용하여이 문제를 추적하는 것 같습니다. 어느?
— FooBar
방화범 외에는 플러그인을 사용하지 않습니다. validator.w3.org에서 페이지 유효성을 확인하는 것은 항상 좋은 일 입니다. 당신이 닫히지 않은 DIV이있는 경우, 당신은 :) 이상한 행동을 가지고 있기 때문에이 문제가 될 것입니다
— billyJoe
4

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

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}
— Nils
소스
3

내 로컬 호스트 에서이 문제를 복제하려고 시도했으며 이상하게 보일 수 있지만 사용중인 Bootstrap JS 파일과 충돌이 있습니다.

다음 코드에 주석을 달아보십시오.

<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>

대신 Bootstrap 2.3.2를 사용하십시오.

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

이것은 나를 위해 작동했습니다.

Bootstrap 버전 3으로 시도했지만 작동하지 않았습니다. 나는 여전히 문제 부분을 찾아 낼 수 없지만 Firebug 어딘가에 e.preventDefault() is not a function오류가 발생했습니다. 이것이 근본 원인이되어야한다고 생각하지만 아직 다른 JS 파일과 비교하지는 않았습니다.

— AyB
소스
3

화면 중앙에 .modal 상단을 설정해 보았습니다. 

.modal {
    position: absolute;
    top: 50%;
}

내 생각의 2 센트.

— 홀거 티에 보쉬
소스
충분히 가깝습니다. 내 문제가 다른 곳에있을 수 있기 때문에 반대표를 던지지는 않지만 이로 인해 화면의 아래쪽 절반이 어두워졌지만 모달은 중앙을 향했습니다.
— crafter
3

부트 스트랩 3.1.1에서는이 솔루션으로 해결했습니다.

body.modal-open {
    position: absolute !important;
}
— 필로
소스
2
당신은 내 일 @Filo 너무 감사 저장
— vinothini
2

div div바로 앞 <div id="footer">이나 뒤에 2 개의 추가 닫는 태그가 있습니다 <div id="mainFrame" class="group">. 나는 이것을 검사하기 위해 Visual Studio 2012 Express를 사용하고 있습니다.

이 2 개의 추가 div를 제거하고 작동 방식을 알려주십시오. 여분의 div를 제거하고 모든 사용자 지정 스크립트를 제거했습니다. 바닥 글에 jquery 코어와 부트 스트랩 만 유지했습니다. 다음은 최종 출력의 화면입니다. 여기 잘 작동하는 jsbin 놀이터가 있습니다.

모든 스크립트와 CSS 파일을로드 하려면 headjs 를 사용하는 것이 좋습니다 . 또한 스크립트를 두 번로드하는 것도 좋은 방법이 아닙니다.

여기에 이미지 설명 입력

— Ravimallya
소스
4
비추천 답변에는 이유가있는 적절한 의견이 필요합니다.
— Ravimallya 2014
2

이것을 사용하여 모달을 열고 어떤 일이 발생하는지 확인하십시오.

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>
— 스쿠터
소스
2 
body.modal-open {
overflow: visible !important;
}

문제를 해결하려면 중요한 속성이 필요했습니다.

— 디즐
소스
이것은 나를 위해 일했으며 pstenstrm의 답변에서 @MandM의 문제 (댓글에)가있었습니다. "나를 위해 작동하지 않습니다. .modal ( 'show')로 여는 바닐라 모달이 있는데 여전히 스크롤됩니다. 페이지 맨 위로. Bootstrap v3.2.0 ". 유일한 이상한 효과는 창보다 더 큰 모달을 계속 스크롤하면 배경이 스크롤된다는 것입니다. 그러나 이것은 저에게 사소한 문제입니다. 감사.
— dgig
1

Bootstrap 2.3.2를 사용하여 동일한 문제가 발생했습니다.

링크를 클릭하는 데 문제가있었습니다.

트릭은 : return false;

<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
     <i class="icon-map-marker"></i>
</a>

그리고 js :

function openModal() {
    $('#myModal').modal('show');
}
— mpccolorado
소스
1

나는 여기와 다른 곳에서 모든 것을 시도하는 데 몇 시간을 보냈습니다. angularjs-material 사용의 경우 uibModal.open 구성 개체 인수에서 애니메이션을 비활성화해야했습니다.

예를 들면 :

  $uibModal.open(
    {
      animation: false,
      component: 'myDialogComponent',
      size: 'lg',
      resolve: {
        details: function() {
          return detailsCollection;
        }
      }
    }
  );

이것이 다른 사람에게 도움이되기를 바랍니다.

— 나단 비치
소스
1

Angular 프로그램에서이 문제가 발생하는 경우 .scss 파일의 첫 번째 줄에 아래 코드를 추가하십시오.

::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}
— 시바 샨 카르 팬더
소스
0

나는 똑같은 문제가 있었고 나는 그것을 이해했다고 생각합니다. 모달 HTML을 body 태그의 직접 자식으로 배치하기 만하면됩니다 ! 필요한 곳에 모달을 트리거하는 버튼에 대한 HTML 코드를 배치 할 수 있습니다. 이 문제를 유발하는 CSS 상속 및 위치 문제를 피할 수 있다고 생각합니다.

예:

<body>
    <!-- All your other HTML code -->
    <div>
        <!-- Button trigger modal -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
</body>
— 누노 아루 다
소스
0

마침내 이것을 알아 냈습니다. 모달을 대상으로하는 버튼을 앵커 태그로 감싸지 마십시오.

나쁜

<a href"#">
    <button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>

좋은

<button type="button" class="btn"
    data-toggle="modal" data-target="#myModal">See Detail</button>
— ALF 머신
소스
0

이건 나를 위해 해줬 어

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
— Warkitty
소스
모달이 열릴 때 navbar 및 컨테이너 점프와 비슷한 문제가 발생했습니다. 이것이 제가 찾고 있던 것입니다.
— Awhitey98
도움이되어 기쁩니다!
— warkitty
0

몇 시간 동안 수십 개의 답변을 읽은 후 부트 스트랩 파일에서 원본 코드를 다시 복사하고 단계별로 디버깅하여 항상 맨 위로 점프하는 원인을 확인했습니다. 실제 최신 버전의 Bootstrap 3은 현재 위치에서 모달을 표시하기 때문입니다. 나는 것을 발견했다 -webkit-transform: translate3d(0,0,0);및 height: 100%이 동작을 야기 내 CSS의 몸 태그에. 아마도 이것이 도움이 될 것입니다.

— AlexioVay
소스
0

나를 위해 버전을 3.1.1 에서 3.3.7로 변경 하면 작동합니다.

버전 3.3.1을 사용할 필요가 없으면 교체해보십시오.

변경 후 나머지 기능이 올바르게 작동하는지 확인 하는 것이 좋습니다 .

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
— 표
소스
0

body.modal-open { position: inherit; }

이것은 나를위한 매력처럼 작동했습니다.

— Nimish Goel
소스
0

위의 모든 예를 시도했습니다. 이것이 저에게 효과적이었습니다.

.modal-open {

            padding-right: 0 !important;

        }

모델 의 오른쪽 에서 패딩을 제거하면 점프를 방지합니다.

— Stnfordly
소스
0

나는 똑같은 문제를 얻었고 어떤 답변도 나를 도왔습니다. 어리석은 해결 방법을 찾았지만 적어도 내 경우에는 작동합니다.

페이지가 한 번만 위로 스크롤되고 다음에 열린 모달이 예상대로 작동한다는 것을 알았습니다. DOM의 요소를 숨기면 동일한 이상한 스크롤이 시작된다는 것을 알았습니다. 그래서 페이지를로드 한 후 숨기고 제거하는 것보다 더미 div를 만들면 문제가 해결되었습니다.

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
— 보르 질로 안드레이
소스
0

나는 같은 문제에 직면했다. 문제는 .modal-open 클래스를 html 및 body 요소에 추가하는 것입니다. 이 클래스를 body에 추가하면 모든 것이 예상대로 작동합니다.

— 일반 666
소스
-1

이것을 시도하십시오 그것은 완벽하게 작동합니다

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}
— 최소화
소스
-3

pstenstrm의 답변이 작동하지 않으면 다음 대체 버튼 HTML과 결합하십시오.

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>

이렇게하면 버튼이 화면에 계속 표시됩니다.

— 벤
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.