부트스트랩 모달: 전환 시 배경이 맨 위로 이동합니다.
모달에 문제가 있어요페이지에 모달을 전환하는 버튼이 있습니다.모달이 나타나면 페이지가 맨 위로 이동합니다.
해결책을 찾기 위해 최선을 다했지만 정말 막막합니다.
편집:
저는 또한 다음과 같이 시도했습니다.$('#myModal').modal('show');하지만 정확히 같은 효과가 있습니다.
모이열리면달면열.modal-open클래스는 다음으로 설정됩니다.<body>tag.이는 그태로 됩니다. 이 클래스 세트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%;
}
저에게 그것은 위치, 높이, 넘쳐흐르는 것의 조합이었습니다.
부트스트랩 3.1.1에서 다음 솔루션으로 해결했습니다.
body.modal-open {
position: absolute !important;
}
구체적인 오류는 보이지 않지만, HTML 구문을 확인하는 것이 좋습니다.
당신의 소스를 사용한 작은 테스트는 나에게 다음과 같은 오류를 줍니다.
라인 127, 컬럼 34: 미닫이 요소 div.
<div class="inner onlySides">
이것은 문제가 될 수 있습니다.
부트스트랩 2.3.2를 사용할 때도 같은 문제가 있었습니다.
링크를 클릭하는 데 문제가 있었습니다.
속임수는: 거짓으로 돌려주는 것이었습니다.
<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
<i class="icon-map-marker"></i>
</a>
그리고 js:
function openModal() {
$('#myModal').modal('show');
}
점프 배경을 해결하는 가장 쉬운 방법은 두 가지 매개 변수를 정의하는 것입니다.
body.modal-open {
overflow: visible;
padding-right: 0 !important;
}
로컬 호스트에서 이 문제를 복제하려고 했지만 이상하게 보일 수 있지만 사용 중인 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>
대신 부트스트랩 2.3.2를 사용합니다.
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
이것이 저에게 효과가 있었습니다.
저는 부트스트랩 버전 3과 함께 시도해 보았지만 작동하지 않았습니다.나는 여전히 문제 부분을 정확히 지적할 수 없지만 파이어버그가 나를 어디론가 던졌습니다.e.preventDefault() is not a function오류 - 이것이 근본 원인이라고 생각하지만 다른 JS 파일과 비교할 수 없습니다.
화면 중앙에 .modal top을 설정하려고 했습니다.
.modal {
position: absolute;
top: 50%;
}
내 생각 2센트야.
의 추가 마감 .div 태있그 바로 <div id="footer"> 또는그후 <div id="mainFrame" class="group">div이 .div를 저는 이것을 검사하기 위해 비주얼 스튜디오 2012 익스프레스를 사용하고 있습니다.
이 2개의 여분의 div를 제거하고 어떻게 작동하는지 알려주시기 바랍니다.추가 div를 제거하고 모든 사용자 지정 스크립트를 제거했습니다.바닥글에서 jquery 코어 및 부트스트랩만 유지됩니다.여기 최종 출력의 스크린샷이 있습니다.여기는 당신을 위한 jsbin 놀이터로 잘 작동하고 있습니다.
나는 당신이 모든 스크립트와 CSS 파일을 로드하기 위해 headjs를 사용할 것을 제안합니다.또한 스크립트를 두 번 로드하는 것은 좋은 방법이 아닙니다.
이 기능을 사용하여 모달을 열고 어떻게 되는지 확인해 보십시오.
<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
Launch demo modal
</a>
body.modal-open {
overflow: visible !important;
}
저는 그것을 고치기 위해 그것에 대한 중요한 속성이 필요했습니다.
body.modal-open { position: inherit; }
이것은 저에게 매력적으로 작용했습니다.
Angular 프로그램에서 이 문제가 발생하는 경우 아래 코드를 .scss 파일의 첫 줄에 추가합니다.
::ng-deep {
body.modal-open {
overflow: visible !important;
position: absolute !important;
}
}
제 경우 href="#"을 제거하면 완전히 해결되었습니다.
저도 같은 문제가 있었는데, 제가 해결한 것 같습니다.모달 HTML을 본문 태그의 직접 자식으로 배치하기만 하면 됩니다!그러나 필요한 곳 어디에나 모달을 트리거하는 버튼의 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>
저는 여기와 다른 곳에서 모든 것을 시도하는 데 몇 시간을 보냈습니다.Angularjs-material 사용을 위해 uibModal.open config object arg에서 애니메이션을 비활성화해야 했습니다.
예:
$uibModal.open(
{
animation: false,
component: 'myDialogComponent',
size: 'lg',
resolve: {
details: function() {
return detailsCollection;
}
}
}
);
이것이 다른 사람에게 도움이 되기를 바랍니다.
저 또한 같은 문제에 직면하고 있었습니다.모달 팝업이 열릴 때마다 페이지가 맨 위로 스크롤됩니다.저는 모든 곳을 둘러보고 위에 언급된 아이디어들을 시도했지만, 그 중 어느 것도 저에게 도움이 되지 않았습니다.있는 사람만 빼고요.body.modal-open대소문자
그래서 추가했습니다.
body.modal-open {
overflow: visible;
position: relative;
overflow-x: hidden;
}
이것은 상단으로 스크롤하는 문제를 해결한 나의 CSS 파일에 대한 것이지만 페이지에 스크롤러 2개를 추가하여 HTML 태그 자체에 CSS를 실제로 추가할 수 있는 해결책을 가지고 왔습니다.코딩하는 것이 윤리적인지 아닌지는 모르겠지만 우리는 디자이너이고 HTML 태그에 스타일링을 줄 수 있기 때문에 그렇게 했습니다.나는 약간의 jquery를 추가했습니다.
$(document)
.on('show.bs.modal', '.modal', function () { $('html').css('overflow', 'hidden')})
.on('hidden.bs.modal', '.modal', function () { $('html').css('overflow', 'auto') })
HTML의 스크롤바를 전환하는 데 도움이 되었고 저에게는 효과가 있었습니다.
이 사람이 해줬어요
body.modal-open {
overflow: inherit;
padding-right: 0 !important;
}
몇 시간에 걸쳐 수십 개의 답변을 읽은 후 부트스트랩 파일에서 원본 코드를 다시 복사하고 단계별로 디버깅하여 항상 상위로 점프하는 원인을 확인했습니다.부트스트랩 3의 실제 최신 버전은 현재 위치에서 모달을 보여주기 때문입니다.나는 그것을 알았습니다.-webkit-transform: translate3d(0,0,0);그리고.height: 100%내 css body-tag가 이런 행동을 일으켰습니다.누군가에게 도움이 될 수도 있습니다.
버전을 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>
위의 예를 모두 사용해 보았습니다. 이것이 저에게 효과가 있었던 유일한 방법입니다.
.modal-open {
padding-right: 0 !important;
}
모델의 오른쪽에서 패딩을 제거하면 점프를 방지할 수 있습니다.
저는 같은 문제를 얻었지만 어떤 답변도 도움이 되지 않았습니다.바보처럼 보이는 해결책을 찾았지만 적어도 내 경우에는 효과가 있습니다.
저는 페이지가 한 번만 상단으로 스크롤되고 그 이후에는 다음에 열린 모델이 예상대로 작동한다는 것을 발견했습니다.DOM에서 요소를 숨기면 동일한 이상한 스크롤이 시작된다는 것을 알게 되었습니다.그래서 저는 페이지 로드 후에 Dummy div를 생성했습니다. 숨겼다가 제거하는 것보다요. 그리고 이것이 문제를 해결했습니다.
var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
이렇게 하면 더 쉬워집니다.
overflow-y: hidden;
모달 오프닝 시 차체 클래스에 적용하면 차체의 수직 스크롤을 백그라운드에서 방지할 수 있으며 맨 위로 스크롤하지 않고도 동일한 위치에 유지할 수 있습니다.
'body' 요소의 기본 'overflow' 스타일은 다음과 같습니다.
body {
overflow: visible;
}
내 페이지에서 'overflow' 스타일이 다음으로 변경되었습니다.
body {
overflow-y: hidden;
}
그리고 나서 저는 모달이 열리면 '모달-오픈' 클래스가 '몸' 요소에 추가된다는 것을 발견했습니다.
'modal-open' 클래스는 'overflow' 스타일로 엉망이 되고 페이지 또는 내부 요소가 위로 스크롤됩니다.
이를 방지하려면 'modal-open' 클래스가 'body' 요소에 추가되기 전과 후에 동일한 설정을 유지해야 합니다.
그래서 이 섹션을 CSS 파일에 추가했습니다.
body.modal-open {
overflow: visible;
overflow-y: hidden;
}
이제 'body' 요소에 'modal-open'이 추가되기 전과 후에 'overflow' 및 'overflow-y'가 모두 'body' 요소에 대해 동일합니다.
아마도 당신은 'overflow-x'나 다른 스타일 요소를 추가해야 할 것입니다. 단지 당신의 경우에 적응할 수 있습니다.
이것을 시도해 보세요. 완벽하게 작동합니다.
/* fix body.modal-open overflow:hidden */
body.modal-open {
height: auto;
}
그것을 고치는 것은 좋은 생각입니다, 그것은 마치 장난처럼 보입니다!
충분히, 당신의 스타일에 두 개의 CSS 코드 중 하나를 추가했습니다.
.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
pstenstrm의 답변이 효과가 없으면 이 대체 버튼 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' 카테고리의 다른 글
| 파워셸 - 가장 가까운 정수로 반올림 (0) | 2023.08.08 |
|---|---|
| Excel에서 셀에 문자열 쓰기 (0) | 2023.08.08 |
| DOM 요소를 일시적으로 제거했다가 나중에 다시 삽입하시겠습니까? (0) | 2023.08.08 |
| MariaDB 연결 문제(Digital Ocean) (0) | 2023.08.08 |
| Angular 2 - 상위 항목에서 하위 항목에 대해 메서드를 트리거하는 방법 (0) | 2023.08.08 |