부트 스트랩 공식 웹 사이트 다운로드 : http://v3.bootcss.com/
오늘은 부트 스트랩 프레임 워크 사용에 발생하는 문제를 공유 할 것입니다. 제품 개발 중에 다수의 팝업 창 (모달)이 사용되었습니다.
처음으로 사용하는 법을 배우기 시작했을 때이 창은 수직으로 중앙에있을 수없고 항상 위쪽으로 드래그 할 수 없다는 것을 알았습니다. 사용 지침을 살펴본 후에는 너무 많은 속성 설정 및 메소드를 제공하지 않았으므로 기본 메소드를 사용했습니다. 최근 고객은 요청을했습니다. 팝업 창을 중앙에 넣을 수 있습니까? 일부 작은 창은 상단에 있기 때문에 전체 페이지는 불균형이며 큰 페이지는 여전히 허용됩니다.
이전에 Bootstrap에 익숙하지 않았기 때문에 Baidu와 Google을 시작하여 다음과 같이 몇 가지 솔루션 만 있다는 것을 알았습니다.
$ ( "#myModal"). modal (). css ({ "margin -top": function () {return - ($ (this) .Height () / 2);}});참조 주소 : http://www.g2w.me/2012/06/bootstrap-modal-shown-in-thenter/
나는이 방법을 직접 시도했지만 완전히 중앙에 있지는 않았다. 창의 크기가 다르면 표시된 마진 탑 값도 매번 변경되며 커버 레이어에 스크롤 막대가있어서 잘 보이지 않습니다.
나는 또한 그것들을 바꾸는 몇 가지 방법을 시도했지만 낙관적이지는 않았습니다. 창이 튀어 나오기 전에 $ (this) .height ()의 값을 얻을 수 없다는 것을 알았습니다. ($ (Wind
마지막으로 소스 코드 만 연구하고 수직 센터링을 달성하기 위해 Bootstrap.js 파일의 900 줄 후에 다음 코드를 추가 할 수 있음을 알 수 있습니다.
. $ element.children (). eq (0) .css ( "위치", "절대"). css ({ "margin": "0px", "top": function () {return (that. $ elemet (that. $ element.width () - that. $ element.children (). eq (0) .width ()) / 2 + "px";}});페이지 코드는 다음과 같습니다.
<div> <버튼 데이터-토글 = "modal"data-target = "#myModal"> DEMO MODAL </button> <!-modal-> <div id = "myModal"tabindex = "-1"role = "aria-labelledby ="myModallabel "aria-hidden ="true "> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> aria-hidden = "true"> × </button> <h4 id = "mymodallabel"> modal title </h4> </div> <div> ... </div> <div> <버튼 유형 = "button"data-dismiss = "modal"> close </button> <button> </div> <!-/. /.modal-dialog-> < /div> <!-/.modal-> < /div>
렌더링은 다음과 같습니다.
위는 편집기가 소개 한 부트 스트랩 모달 박스 (Modal)의 수직 센터링의 예제 코드입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!