부트 스트랩 모달 : 토글시 배경이 맨 위로 이동
모달에 문제가 있습니다. 페이지에 모달을 토글하는 버튼이 있습니다. 모달이 나타나면 페이지가 맨 위로 이동합니다.
해결책 / 등을 찾기 위해 할 수있는 모든 것을 다했지만 정말 길을 잃었습니다.
편집하다:
나는 또한 시도해 보았지만 $('#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>
$('the thing you click on').click(function ($e) {
$e.preventDefault();
});
이렇게하면 스크롤 막대가 맨 위에 올라가는 것을 막을 수 있습니다.
이 같은 앵커 태그를 사용하는 경우 <a href"#" ..> ... </a>와 href="#"문제를 만드는, 즉를 제거합니다. 여기에서 더 많은 것을 읽을 수 있습니다
특정 오류가 표시되지는 않지만 html 구문 을 확인하는 것이 좋습니다 .
소스를 사용한 작은 테스트는 다음과 같은 오류를 제공합니다.
127 행, 34 열 : 닫히지 않은 요소 div.
<div class="inner onlySides">
이것은 문제가 될 수 있습니다.
코드 어딘가에 중첩 된 모달로 작업 할 수 있습니다.
body.modal-open {
overflow: visible;
position: absolute;
width: 100%;
height:100%;
}
나에게 그것은 위치, 높이 및 오버플로의 조합이었습니다.
내 로컬 호스트 에서이 문제를 복제하려고 시도했으며 이상하게 보일 수 있지만 사용중인 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 파일과 비교하지는 않았습니다.
화면 중앙에 .modal 상단을 설정해 보았습니다.
.modal {
position: absolute;
top: 50%;
}
내 생각의 2 센트.
div div바로 앞 <div id="footer">이나 뒤에 2 개의 추가 닫는 태그가 있습니다 <div id="mainFrame" class="group">. 나는 이것을 검사하기 위해 Visual Studio 2012 Express를 사용하고 있습니다.
이 2 개의 추가 div를 제거하고 작동 방식을 알려주십시오. 여분의 div를 제거하고 모든 사용자 지정 스크립트를 제거했습니다. 바닥 글에 jquery 코어와 부트 스트랩 만 유지했습니다. 다음은 최종 출력의 화면입니다. 여기 잘 작동하는 jsbin 놀이터가 있습니다.
모든 스크립트와 CSS 파일을로드 하려면 headjs 를 사용하는 것이 좋습니다 . 또한 스크립트를 두 번로드하는 것도 좋은 방법이 아닙니다.
이것을 사용하여 모달을 열고 어떤 일이 발생하는지 확인하십시오.
<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
Launch demo modal
</a>
부트 스트랩 3.1.1에서는이 솔루션으로 해결했습니다.
body.modal-open {
position: absolute !important;
}
body.modal-open {
overflow: visible !important;
}
문제를 해결하려면 중요한 속성이 필요했습니다.
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');
}
나는 똑같은 문제가 있었고 나는 그것을 이해했다고 생각합니다. 모달 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">×</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>
마침내 이것을 알아 냈습니다. 모달을 대상으로하는 버튼을 앵커 태그로 감싸지 마십시오.
Bad
<a href"#">
<button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>
Good
<button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
This one did it for me
body.modal-open {
overflow: inherit;
padding-right: 0 !important;
}
After reading dozens answers over several hours I copied the original code from the bootstrap file again and debugged step by step to see what caused that I always jump to the top. Because the actual latest version of Bootstrap 3 is showing the modal at the position you're at right now. I had found out that -webkit-transform: translate3d(0,0,0); and height: 100% in my css body-tag caused this behaviour. Maybe this helps some one.
For me works when I changed the version from 3.1.1 to 3.3.7
If you do not have to use version 3.3.1 try replacing.
After the change, it is good to check that the rest of the function works correctly.
<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>
body.modal-open { position: inherit; }
This worked like a charm for me.
I spent hours on this trying everything here and elsewhere. For angularjs-material usage, turned out I had to disable animation on the uibModal.open config object arg.
For example:
$uibModal.open(
{
animation: false,
component: 'myDialogComponent',
size: 'lg',
resolve: {
details: function() {
return detailsCollection;
}
}
}
);
Hope this helps someone else.
I tried all of the above examples - this is the only thing that worked for me:
.modal-open {
padding-right: 0 !important;
}
Removing the padding from the right side of the model - prevents the jump.
height:100% is solve problem, but you must add correct "div"
I got the same issue and none of answers helped me. Found a workaround which looks stupid but it works at least in my case.
I found that page is scrolling to top only once and after that next opened modals works as expected. Than I found that hiding of any element in the DOM initiates the same strange scroll. So I just creating a dummy div after page load than hidding and removing it and this solved the issue.
var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
I was facing the same issue. Problem was I was adding .modal-open class to html and body elements. Just add this class to body and everything work as expected.
The easiest way to solve the jumping background is to define two parameters:
body.modal-open {
overflow: visible;
padding-right: 0 !important;
}
Try this it works perfectly
/* fix body.modal-open overflow:hidden */
body.modal-open {
height: auto;
}
it's good idea for fixed it, it's look like jock!
just enough, added one of two css code in your style
.body.modal-open { overflow:visible;padding-right:0px !important;}
.body.modal-open { height:auto;padding-right:0px !important;}
https://github.com/jschr/bootstrap-modal/issues/131#issuecomment-153405449
If pstenstrm's answer doesn't work for you, try combining it with this replacement button HTML:
<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>
이렇게하면 버튼이 화면에 계속 표시됩니다.
참고 URL : https://stackoverflow.com/questions/21604674/bootstrap-modal-background-jumps-to-top-on-toggle
'Programing' 카테고리의 다른 글
| MSBUILD : 오류 MSB1008 : 하나의 프로젝트 만 지정할 수 있습니다. (0) | 2020.08.17 |
|---|---|
| 사전 목록에 값이 이미 있는지 확인 하시겠습니까? (0) | 2020.08.17 |
| leftAnchor와 leadingAnchor의 차이점은 무엇입니까? (0) | 2020.08.17 |
| C ++에서 문자열을 가변 횟수로 반복하는 방법은 무엇입니까? (0) | 2020.08.17 |
| iOS-프로그래밍 방식으로 UISwitch를 설정하는 방법 (0) | 2020.08.17 |