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

부트스트랩 멀티 모달

bootstrap version: 3.3.5

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

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

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

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

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

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

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

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

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

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

2016.12.22 업데이트

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

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

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

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

다운로드멀티모달 소스 - 모달 한번에 닫기 추가
공유 해 주세요~

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

  1. 스타일시트에서 수정해 줄건 두번째 모달이 닫힌 후 모달의 스크롤이 안되는 것을 찾고 있었는데 마침 딱 있네요ㅎㅎ 감사합니다.^^

  2. 2번째모달이 켜졌을때 2번재모달에서 닫기버튼이나 확인버튼을 클릭시 처음켜졌던모달도전부 한번에 닫히게 할순 없나요 ?

    1. 안녕하세요~
      제가 확인이 늦었습니다.ㅡㅡ
      모달을 전부 닫게 하는 기능도 필요할거 같네요
      말씀하신 방법을 찾아보겠습니다.

    2. 멀티모달의 마지막의 모달에서 열려있는 모든 모달을 닫을 수 있도록 수정하여 업데이트 해 놓았어요~ 참고하세요

  3. 모달 두개를켰을때 스크롤이 포커싱아웃되는문제를 해결했습니다. 감사합니다. 그런데 auto로 줘서 그런지 길이가 긴모달일경우는 포커스가유지되는데 모달이 짧을경우는 여전히 스크롤이 뒷배경에 가있네요 그런데 예시로보여주신것에선 그렇지않은것 같은데 저와차이점을 좀 알려주실 수 있을까요?

    1. 안녕하세요~
      요즘 제가 블로그 확인을 잘 못해서 확인이 늦었네요 ㅡㅡ;;
      어떤 포커스를 말씀하시는지 잘 모르겠어요…
      다시한번 자세히 알려주시면 좋겠어요~

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다