부트 스트랩 모달 구성 요소를 사용한 사람들은 혼란스러워합니다. 좋은 팝업 상자가 수직 중앙에있을 수없는 이유는 무엇입니까? 나는 EIT 프로젝트를 진행하고있었습니다. 이 프로젝트의 일부 프레임 워크는 NTTDATA의 일부 규칙을 따르기 때문에 부트 스트랩을 사용했습니다. 나는이 일을 처음으로 만났고 그것이 매우 갈등하다고 느꼈고 그것이 좋지 않다고 생각했지만 그것을 사용했을 때 다른 팝업 상자와 다르지 않다고 느꼈습니다. 부트 스트랩 팝업 박스의 수직 센터링 문제는 덜 말도 안되는 말로 가십시오. 내가 얻은 팝업 상자의 스타일은 수직 중심이 아니지만 10%가 높기 때문에 페이지는 매우 역겨워지기 때문입니다.
솔루션은 다음과 같습니다.
1. CSS에서 찾으십시오
.modal.fade.in {top : 10%;}이 스타일을 수정하면 괜찮을 것입니다. CSS는 글로벌이므로 페이지에서 특정 모달의 (높이) 위치를 정의 할 수도 있습니다. 이 방법은 다음과 같습니다.
<tyle>#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; 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; // Scrollbar Solution Console.log (왼쪽); 그. $ element .addclass ( 'in') .attr ( 'aria-hidden', false) .css ({왼쪽 : 왼쪽 : 상단 : 상단, 여백 : "0 Auto"}); that.enforcefocus ()일단 발견되면 빨간색을 추가하면 괜찮을 것이므로 모든 팝업 박스가 수직으로 중앙에 있습니다.
위의 내용은 편집자가 소개 한 부트 스트랩 팝업 박스 (Modal)의 수직 센터링 문제와 솔루션에 대한 자세한 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!