티스토리 뷰
부트스트랩 modal 사용하기
w3schools나 bootstrap 공식홈페이지를 잘 참고하고 있지만, 매번 까먹어서 이참에 정리를 해본다. 1. 모달 띄우는 방법 모달에 트리거를 거는 방법은 두 가지가 있다. 태그나 , 혹은 다른 element 에 data-
aramk.tistory.com
- a나 button이나 div 등을 클릭했을 때 모달창 생성
- data-toggle="modal" 속성 꼭 넣어야 (제이쿼리로 제어할 경우 안 넣어도 됨)
- data-target에 모달창의 id나 class 값 넣어서 모달창 생성으로 연결, a 태그의 경우 href를 활용해도 됨 (버튼이 두 개 이상인 경우가 많으므로 클래스로 제어하기)
- data-*** 속성을 넣어서 모달창과 연결 (ex. data-tit="소개 영상")
- 모달창은 제이쿼리로 제어하는 것이 아니라 부트스트랩으로 fade 모달 레이아웃을 만들면 버튼 클릭 시 fadeIn으로 모달 생성, 닫기 버튼 클릭 시 fadeOut으로 모달창 닫는 형태가 자동으로 만들어짐
- .form-group으로 묶어주면 margin-bottom:10px이 자동으로 들어감
- 모달 헤더 부분에서 타이틀로 인해 X 버튼이 눌리지 않을 수 있으므로 inline-block 속성 주기
- X 버튼이 잘 안 보일 경우 opacity 및 폰트사이즈 조절
'WebPublisher' 카테고리의 다른 글
| [jQuery] 제이쿼리 충돌 (0) | 2021.11.25 |
|---|---|
| [javaScript] 프린트 스크린 방지 (0) | 2021.11.11 |
| [jQuery] percentage animation 효과 적용 (progress bar) (0) | 2021.11.11 |
| [jQuery] list style (each 문 활용한 애니메이션 효과 적용) (0) | 2021.11.11 |
| [css] html 애니메이션(animation) 속성 (0) | 2021.11.11 |
공지사항