반응형
Bootstrap 모달은 기본적으로 화면 중앙에 위치합니다. 만약 중앙 위치가 제대로 동작하지 않는다면, CSS를 추가하여 중앙에 위치하도록 조정할 수 있습니다. 아래는 중앙에 위치하도록 CSS를 추가한 예시입니다.
모달 창이 중앙에 위치하지 않는 경우에는, Bootstrap의 버전과 브라우저의 호환성 문제일 수 있습니다. Bootstrap 4.5.0 이상에서는 모달 창이 기본적으로 화면 중앙에 위치하도록 설정되어 있습니다.
만약 Bootstrap 4.5.0 이상을 사용하고 있음에도 불구하고, 모달 창이 중앙에 위치하지 않는다면, 아래와 같이 vh 단위를 사용하여 중앙에 위치하도록 조정해 볼 수 있습니다.
위의 CSS 코드는 모달 창의 최소 높이를 화면의 높이(100vh)에서 60px을 뺀 값으로 설정하고, flex-direction을 column으로 설정하여 내부 요소들이 세로 방향으로 배열되도록 하였습니다. justify-content: center;는 내부 요소들을 세로 방향으로 중앙에 배치하도록 하였습니다. 마지막으로 overflow: auto;는 모달 창의 내용이 창의 크기를 초과할 경우 스크롤이 생기도록 하였습니다.
반응형
'개발 > javascript' 카테고리의 다른 글
| js 카운트 다운 및 남은 시간 표시 방법 (setInterval 사용) (0) | 2023.01.12 |
|---|---|
| javascript iframe 투명화 allowTransparency 적용 안될 때 (0) | 2020.08.24 |
