Modal

사용자에게 정보를 보여주거나 특정 동작을 유도할때, 레이어를 띄워 동작이 종료되기 전까지 기존 콘텐츠로 이동하지 못하도록 만든 UI입니다. "레이어 팝업"과 통합해 모두 “모달”이라고 부르는 경향이 있습니다. ( ※ 팝업은 새창 )

Types

Default

모달의 제목

hurch-key American Apparel trust fund, cardigan mlkshk small batch Godard mustache pickled bespoke meh seitan. Wes Anderson farm-to-table vegan, kitsch Carles 8-bit gastropub paleo YOLO jean shorts health goth lo-fi. Normcore chambray locavore Banksy, YOLO meditation master cleanse readymade Bushwick.

<button type="button" id="modal01" class="btn btn_sm btn_primary btn_modal_open">모달창 열기</button> <div class="modal_container fade" data-modal="modal01" aria-modal="true" role="dialog" tabindex="-1" aria-hidden="true"> <div class="modal_overlay"></div> <div class="modal_content"> <div class="modal_header"> <h1>모달의 제목</h1> <button class="btn_modal_close ico_24 ico_close"><div class="blind">모달 닫기</div></button> </div> <div class="modal_body"> <p>모달의 내용</p> </div> <div class="modal_footer"> <div class="btn_group"> <button class="btn_modal_close btn btn_md btn_primary">확인</button> </div> </div> </div>  </div> 
소스 코드가 복사되었습니다.
Confirm Modal

콘텐츠 삭제

선택하신 내역을 삭제하시겠습니까?

<button type="button" id="modal02" class="btn btn_sm btn_primary btn_modal_open">모달창 열기</button> <div class="modal_container fade" data-modal="modal02" aria-modal="true" role="dialog" tabindex="-1" aria-hidden="true"> <div class="modal_overlay"></div> <div class="modal_content"> <div class="modal_header"> <h1>콘텐츠 삭제</h1> </div> <div class="modal_body"> <p>선택하신 내역을 삭제하시겠습니까?</p> </div> <div class="modal_footer"> <div class="btn_group"> <button class="btn_modal_close btn btn_md btn_normal">취소</button> <button class="btn btn_md btn_primary" type="submit">삭제</button> </div> </div> </div>  </div> 
소스 코드가 복사되었습니다.
Slider in Modal

모달의 제목

<button type="button" id="modal03" class="btn btn_sm btn_primary btn_modal_open">모달창 열기</button> <div class="modal_container fade" data-modal="modal03" aria-modal="true" role="dialog" tabindex="-1" aria-hidden="true"> <div class="modal_overlay"></div> <div class="modal_content"> <div class="modal_header"> <h1>모달의 제목</h1> </div> <div class="modal_body"> <div id="swiper1" class="swiper swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="http://placehold.it/500x500?text=slide01" alt></div> <div class="swiper-slide"><img src="http://placehold.it/500x500?text=slide02" alt></div> <div class="swiper-slide"><img src="http://placehold.it/500x500?text=slide03" alt></div> <div class="swiper-slide"><img src="http://placehold.it/500x500?text=slide04" alt></div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div>  </div> <div class="modal_footer"> <div class="btn_group"> <button class="btn_modal_close btn btn_md btn_primary">확인했습니다.</button> </div> </div> </div>  </div>  <script> const mySwiper1 = new Swiper('#swiper1', { slidesPerView: 1, navigation: { // ★ 내비게이션 있을 때 nextEl: '#swiper1 .swiper-button-next', prevEl: '#swiper1 .swiper-button-prev', }, }); </script>
소스 코드가 복사되었습니다.
Scroll in Modal

모달의 제목

Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione?

<div class="snippet_item modal_snippet"> <button type="button" id="modal04" class="btn btn_sm btn_primary btn_modal_open">모달창 열기</button> <div class="modal_container fade" data-modal="modal04" aria-modal="true" role="dialog" tabindex="-1" aria-hidden="true"> <div class="modal_overlay"></div> <div class="modal_content"> <div class="modal_header"> <h1>모달의 제목</h1> </div> <div class="modal_body"> <div class="scroll_inner"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi ut ipsam possimus obcaecati nemo at tempore enim esse quis illum ea veniam placeat accusantium, aliquid consequuntur sit consectetur aperiam ratione? </p> </div> </div> <div class="modal_footer"> <div class="btn_group"> <button class="btn_modal_close btn btn_md btn_primary">확인했습니다.</button> </div> </div> </div>  </div> 
소스 코드가 복사되었습니다.

Usage

Login Modal

로그인

<div class="snippet_item modal_snippet"> <button type="button" id="modal05" class="btn btn_sm btn_primary btn_modal_open">로그인</button> <div class="modal_container fade" data-modal="modal05" aria-modal="true" role="dialog" tabindex="-1" aria-hidden="true"> <div class="modal_overlay"></div> <div class="modal_content"> <div class="modal_header"> <h1>로그인</h1> <button class="btn_modal_close ico_24 ico_close"><div class="blind">로그인 모달 닫기</div></button> </div> <div class="modal_body"> <form action="" id="loginFrm"> <div class="login_form"> <div class="input_group vertical w_full"> <input type="text" id="" class="input_text" value="" placeholder="아이디를 입력해 주세요."> <input type="password" id="" class="input_text" value="" placeholder="비밀번호를 입력해 주세요."> </div> </div> </form> </div> <div class="modal_footer"> <div class="btn_group"> <button class="btn btn_md btn_primary w_full justify_content_center" type="submit" form="loginFrm">로그인</button> </div> </div> </div>  </div> 
소스 코드가 복사되었습니다.
Notice Modal

공지사항

오늘 하루 보지 않기

<button type="button" id="modal06" class="btn btn_sm btn_primary btn_modal_open">공지사항 모달</button> <div class="modal_container fade" data-modal="modal06" aria-modal="true" role="dialog" tabindex="-1" aria-hidden="true"> <div class="modal_overlay"></div> <div class="modal_content"> <div class="modal_header"> <h1>공지사항</h1> </div> <div class="modal_body"> <img class="w_full" src="../resources/images/@sample_modal.png" alt="택배사 파업으로 인한..."> </div> <div class="modal_footer"> <form action="" id="noticeFrm"></form> <div class="btn_group"> <div class="input_check_wrap spm_r_auto"> <input type="checkbox" id="check-1" class="input_check" name="check-item-1"> <label for="check-1">오늘 하루 보지 않기</label> </div> <button class="txt_deco_under btn_modal_close" type="submit" form="noticeFrm">닫기</button> </div> </div> </div>  </div> 
소스 코드가 복사되었습니다.
Terms Modal

이용약관

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit quis earum facilis rerum commodi ad molestias modi, maiores, tempora illo alias. Dignissimos obcaecati nostrum non aut, nulla repellat. Excepturi.

<button type="button" id="modal07" class="btn btn_sm btn_primary btn_modal_open">공지사항 모달</button> <div class="modal_container fade" data-modal="modal07" aria-modal="true" role="dialog" tabindex="-1" aria-hidden="true"> <div class="modal_overlay"></div> <div class="modal_content"> <div class="modal_header"> <h1>이용약관</h1> </div> <div class="modal_body"> <p> 긴글내용 </p> </div> <div class="modal_footer"> <div class="btn_group"> <button class="txt_deco_under btn_modal_close">닫기</button> </div> </div> </div>  </div> 
소스 코드가 복사되었습니다.

Modal

Types

Default

Confirm Modal

Slider in Modal

Scroll in Modal

Usage

Login Modal

Notice Modal

Terms Modal