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

7 Comments / Free Template / By

부트스트랩 멀티 모달

version: 3.3.5

 


 
 

부트스트랩 모달을 사용하다 보니 모달 여러개를 순차적으로 한페이지에서 처리해야 하는 경우가 있습니다. 필요한 경우 이 을 사용해 볼 수 있습니다.

버튼마다 각각 모달을 적용해 줘야 되는 경우와는 조금 다른 경우죠

위에 첨부된 멀티플 모달은 정리 해서 올려 놓은거니 바로 적용 해도 됩니다.

물론 부트스트랩코어도 같이 들어가있으며 적용할때 멀티모달의 세로 크기가 넘어갈때 스크롤 되도록 약간 수정을 해서 올려 놓았습니다.

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

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

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

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

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

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

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


 


 
 



  
    
    
    
    
    Bootstrap 101 Template

    
    
    
    
    
    

    
    
    
  
  
    

      

        

          

            
멀티모달 테스트

          

        

        Launch modal

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

#myModal {
  overflow: auto;
}
#myModal12 {
  overflow: auto;
}

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

2016.12.22 업데이트

Hyeongio 님이 문의해 주신 마지막 모달에서 열려있는 모달을 전부 닫을 수 있는 기능 추가

소스의 마지막 멀티모달 부분 (138번 줄) 추가

All Close

소스의 마지막 부분에 멀티모달을 한번에 닫을 수 있는 스크립트 추가 되었습니다.

이렇게 하면 열려 있는 모든 멀티모달을 닫을 수 있고, 모달의 ID를 수정하여 멀티모달의 갯수와 상관없이 적용하여 사용할 수 있습니다.

카테고리 인기글

Tags

, , , ,
Scroll to Top