Bootstrap 팝업 상자(모달)의 수직 센터링 문제 및 해결 방법에 대한 자세한 설명

부트스트랩 모달(modal box) 컴포넌트를 사용해 본 사람들은 왜 좋은 팝업 상자가 수직 중앙에 위치할 수 없는지 혼란스러워합니다. 우연히 eit 프로젝트를 진행하고 있었는데, 이 프로젝트의 일부 프레임워크는 nttdata의 몇 가지 규칙을 따라야 하기 때문에 Bootstrap을 처음 접했을 때 저항이 많았고 좋지 않다고 느꼈습니다. 그런데 사용해 보니 다른 팝업박스와 별반 차이가 없는 것 같습니다. 더 이상 고민하지 않고 부트스트랩 팝업 상자의 수직 중앙 정렬 문제에 대해 살펴보겠습니다. 제가 얻은 팝업 상자 스타일은 수직 중앙 정렬이 아니라 상위 10%이지만 페이지가 길면 특히 역겨워 보입니다.

해결 방법은 다음과 같습니다.

1. CSS에서

.modal.fade.in {
top: 10%;
}

이 스타일은 CSS에서 전역이므로 페이지 내 특정 모달의 (높이) 위치에 정의할 수도 있습니다.

<style>
#myModal-help
{
top:300px;
}
</style>

#myModal-help 모달의 id이므로 설정이 괜찮습니다.

2. js에서는

bootstrap-modal.js를 사용합니다(bootstrap.js나 bootstrap.min.js를 사용하는 경우에는 동일합니다. 하지만 해당 위치를 찾아야 합니다).

은 js에서 발견됩니다(빨간색은 제가 추가한 방법입니다):

var left = ($(document.body).width() - that.$element.width()) / 2;
<strong><span style="color: #ff0000">var top = ($(document.body).height() - that.$element.height()) / 2;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop; //滚动条解决办法
var top = (window.screen.height / 4) + scrollY - 120; //滚动条解决办法
</span></strong>console.log(left);
that.$element
.addClass(&#39;in&#39;)
.attr(&#39;aria-hidden&#39;, false)
.css({
left: left,
top: top,
margin: "0 auto"
});
that.enforceFocus()

찾은 후 빨간색을 추가하세요. 하나 입력하면 괜찮습니다. 그러면 모든 팝업 상자가 수직 중앙에 위치하게 됩니다.

위는 부트스트랩 팝업박스(모달)의 수직 센터링 문제와 해결 방법에 대해 편집자가 소개한 관련 지식입니다. 질문이 있으신 경우 메시지를 남겨주시면 시간 내에 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

Bootstrap 팝업 상자(모달)의 세로 중심 배치와 관련된 문제 및 해결 방법에 대한 자세한 설명은 PHP 중국어 웹사이트를 참고하세요!