부트스트랩 모달 팝업의 수직 중심 맞추기

저는 프론트엔드 신인인데, 회사에서 프로젝트에 부트스트랩을 사용하려고 하는데, 동료들을 위해 제가 앞장서서 "구덩이"를 헤쳐나가는데 UI 소녀가 모달을 만드는 것을 어렵게 만듭니다. 프론트엔드 개발직이라는 명예를 위해 세로 중앙에 팝업박스를 배치하는데 시간을 투자합니다.

첫번째는 바이두 소스코드를 수정하는 방법입니다

that.$element.children().eq(0).css("position", "absolute").css({
     "margin":"0px",
     "top": function () {
       return (that.$element.height() - that.$element.children().eq(0).height()-40) / 2 + "px";
     },
    "left": function () {
       return (that.$element.width() - that.$element.children().eq(0).width()) / 2 + "px";
     }
   });

여기의 that.element는 가장 바깥쪽 레이어인 div.modal, that.element.children().eq(0)은 div.modal-dialog인데, 이는 내부의 modal-dialog의 왼쪽 값과 높이 값을 계산하여 중앙에 두는 것에 지나지 않습니다. 이 코드를 bootstrap.js의 소스 코드(약 1,000줄)에 추가하면 .element.children().eq(0).width()가 항상 0이라는 것을 알 수 있습니다. 아직 생성되지 않았으며 얻을 수 없습니다. 내 의견으로는 150ms의 setTimeout 지연을 추가했지만 올바르게 중앙에 배치되었습니다. 하나는 사용자가 창을 적극적으로 드래그할 때 발생한다는 것입니다. 크기 조정 방법을 작성하는 것도 매우 간단합니다. 두 번째 문제는 창이 600보다 작을 때 that.element.children().eq(0)의 값이 .width()는 맞을 때도 있고 틀릴 때도 있으니(마스터에게 도움을 요청하세요), 포기하세요

문제를 직접 해결하고 싶다면 위 내용을 보고 무시하세요

.

수직 센터링은 디스플레이: 테이블-셀을 고려합니다. 인터넷에서 영감을 얻은 솔루션은 다음과 같습니다.
스타일을 다시 작성하고 html에 스타일 태그나 외부 링크를 추가하세요.

.modal-dialog{display:table-cell;vertical-align:middle;}
.modal-content{width:600px;margin:0px auto;}
@media screen and (max-width: 780px) {
.modal-content{width:400px;}
}
@media screen and (max-width: 550px) {
.modal-content{width:220px;}
}

모달 트리거 이벤트 $('.modal').modal()을 다음

$('.modal').modal().css({'display':'table','width':'100%','height':'100%'})

변경하기는 매우 간단하지만 결과적으로 모달을 사라지게 하는 이벤트는 유효하지 않습니다. 제가 검색한 정보에는 그렇게 되어 있는데 이해가 되지 않습니다.

<

이 시점에서 모달의 수직 센터링은 가능하지만 여전히 모달 배경의 페이드인 시간과 페이드아웃 시간에 문제가 있습니다. 너무 과장되어 있고 원본과 조금 다릅니다. 미리 알려주세요.

$(触发器).click(function(){         
  $('.modal').modal().css({'display':'table','width':'100%','height':'100%'})//这句触发modal
  $('.modal-backdrop').fadeIn()
  event.stopPropagation();//因为触发的元素肯定在document里边，所以必须阻止冒泡
})
$(document).click(function(){
  $('.modal').hide()
  $('.modal-backdrop').fadeOut()
})

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

부트스트랩 모달 팝업 상자의 수직 중심 배치에 관한 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!