모달 여러개 만들기(멀티모달)-bootstrap multiple modal

[adsense]

부트스트랩 멀티 모달

bootstrap version: 3.3.5

Template Download소스 다운로드
 
 
부트스트랩 모달을 사용하다 보니 모달 여러개를 순차적으로 한페이지에서 처리해야 하는 경우가 있습니다.
버튼마다 각각 모달을 적용해 줘야 되는 경우와는 조금 다른 경우죠

Multiple Modal 이라고 검색을 해보면 많이 나옵니다.
위에 첨부된 멀티플 모달은 정리 해서 올려 놓은거니 바로 적용 해도 됩니다.
물론 부트스트랩코어도 같이 들어가있으며 적용할때 모달의 세로 크기가 넘어갈때 스크롤 되도록 약간 수정을 해서 올려 놓았습니다.

모달은 총 4개까지 띄울 수 있도록 되어 있습니다.

멀티모달화면

처음 페이지에서 Launch Modal을 클릭해서 모달을 열어 줍니다.

첫번째모달

첫번째 모달입니다. 일부러 조금 화면을 벗어나서 스크롤이 생겨 모달을 스크롤 할 수있도록 했구요, 아래로 내려서 Launcj Modal을 클릭하면 두번째 모달이 나옵니다.

두번째모달

이렇게 두번째 모달까지 나오고 계속 해서 총4개까지 나올 수 있도록 돠어 있는 템플릿입니다.

전체 소스는 아래에 있습니다.

Source Download소스 다운로드  LIVE DEMO미리보기
 
 
[adsense]
 
 

스타일시트에서 수정해 줄건 두번째 모달이 닫힌 후 모달의 스크롤이 안되는 것을 CSS에서 추가 했습니다.

부트스트랩 코어를 사용하고 있다면 위의 소스만 복사해서 바로 적용을 하시면 되겠죠?

Leave a Reply

Your email address will not be published. Required fields are marked *