Popup
Modal Popup
- default size : 1100 x 700 (px) / 팝업의 최대 높이값은 700px을 초과하지 않도록합니다.
- 조회영역 : 2단으로 배치합니다.
- bottom : 하단 버튼영역은 고정됩니다.
- modal__mask의 data-modal-close="close" 유무로 닫기 옵션을 설정 할 수 있습니다.
팝업 타이틀명
Label
Label
Label
콘텐츠
팝업 타이틀명
Label
Label
Label
콘텐츠
<a href="#popup-1" data-modalopen="open" class="btn is-primary">Modal Popup</a>
<div id="popup-1" data-modal="modal" class="modal">
<div class="modal__inner">
<div class="modal__header">
<div class="modal__title">팝업 타이틀명</div>
<button data-modal-close="close" class="modal__close">닫기</button>
</div>
<div class="modal__content">
<div class="formSearch mb-30">
<div class="formSearch__content">
<div class="formSearch__item">
<div class="formSearch__title"><div class="is-requirement">Label</div></div>
<div class="formSearch__form">
<div class="formSelect">
<div class="select-1"></div>
</div>
</div>
</div>
<div class="formSearch__item">
<div class="formSearch__title">Label</div>
<div class="formSearch__form">
<div class="formControl">
<input type="text" placeholder="입력하세요" class="form__input">
</div>
</div>
</div>
<div class="formSearch__item is-col2">
<div class="formSearch__title">Label</div>
<div class="formSearch__form">
<div class="formControl">
<input type="text" placeholder="입력하세요" class="form__input d-inline-flex">
<label class="radio__label ml-10">
<input type="radio" name="radio1" class="radio__input">
<span class="radio__style"></span> Yes
</label>
<label class="radio__label ml-10">
<input type="radio" name="radio1" class="radio__input">
<span class="radio__style"></span> No
</label>
</div>
</div>
</div>
</div>
<div class="formSearch__btn">
<button class="btn is-search"><span class="icon is-search"></span>조회</button>
</div>
</div>
<div style="height:50rem;padding:2rem;background-color: #ddd;">콘텐츠</div>
</div>
<div class="modal__footer">
<button type="button" data-modal-close="close" class="btn is-primary">취소</button>
<button type="button" data-modal-close="close" class="btn is-confirm">확인</button>
</div>
</div>
<div class="modal__mask"></div>
</div>
<a href="#popup-2" data-modalopen="open" class="btn is-primary">Modal Popup - mask 닫기 옵션</a>
<div id="popup-2" data-modal="modal" class="modal">
<div class="modal__inner">
<div class="modal__header">
<div class="modal__title">팝업 타이틀명</div>
<button data-modal-close="close" class="modal__close">닫기</button>
</div>
<div class="modal__content">
<div class="formSearch mb-30">
<div class="formSearch__content">
<div class="formSearch__item">
<div class="formSearch__title"><div class="is-requirement">Label</div></div>
<div class="formSearch__form">
<div class="formSelect">
<div class="select-2"></div>
</div>
</div>
</div>
<div class="formSearch__item">
<div class="formSearch__title">Label</div>
<div class="formSearch__form">
<div class="formControl">
<input type="text" placeholder="입력하세요" class="form__input">
</div>
</div>
</div>
<div class="formSearch__item is-col2">
<div class="formSearch__title">Label</div>
<div class="formSearch__form">
<div class="formControl">
<input type="text" placeholder="입력하세요" class="form__input d-inline-flex">
<label class="radio__label ml-10">
<input type="radio" name="radio1" class="radio__input">
<span class="radio__style"></span> Yes
</label>
<label class="radio__label ml-10">
<input type="radio" name="radio1" class="radio__input">
<span class="radio__style"></span> No
</label>
</div>
</div>
</div>
</div>
<div class="formSearch__btn">
<button class="btn is-search"><span class="icon is-search"></span>조회</button>
</div>
</div>
<div style="height:50rem;padding:2rem;background-color: #ddd;">콘텐츠</div>
</div>
<div class="modal__footer">
<button type="button" data-modal-close="close" class="btn is-primary">취소</button>
<button type="button" data-modal-close="close" class="btn is-confirm">확인</button>
</div>
</div>
<div class="modal__mask" data-modal-close="close"></div>
</div>
Alert
- 브라우저 middle, center에 배치합니다.
- Alert 팝업의 내용은 간결해야 하며 최대 3줄을 초과하지 않는것을 권장합니다.
경고/삭제
해당 항목을 삭제하시겠습니까?
에러
해당 항목을 삭제하시겠습니까?
확인
텍스트 영역입니다. 텍스트 영역입니다. 텍스트 영역의 width 값을 초과하지 않도록 합니다. 3줄 이상일 경우 팝업 height가 늘어납니다.
<a href="#alert-1" data-modalopen="open" class="btn is-bgblack">경고/삭제</a>
<div id="alert-1" data-modal="modal" class="modal">
<div class="alert">
<div class="alert__header">
<strong class="alert__title is-warning">경고/삭제</strong>
<button data-modal-close="close" class="alert__close">닫기</button>
</div>
<div class="alert__text">
<p>해당 항목을 삭제하시겠습니까?</p>
</div>
<div class="alert__footer">
<button data-modal-close="close" class="btn is-primary">취소</button>
<button data-modal-close="close" class="btn is-confirm">삭제</button>
</div>
</div>
<div class="modal__mask" data-modal-close="close"></div>
</div>
<a href="#alert-2" data-modalopen="open" class="btn is-bgprimary">에러</a>
<div id="alert-2" data-modal="modal" class="modal">
<div class="alert">
<div class="alert__header">
<strong class="alert__title is-error">에러</strong>
<button data-modal-close="close" class="alert__close">닫기</button>
</div>
<div class="alert__text">
<p>해당 항목을 삭제하시겠습니까?</p>
</div>
<div class="alert__footer">
<button data-modal-close="close" class="btn is-primary">취소</button>
<button data-modal-close="close" class="btn is-confirm">삭제</button>
</div>
</div>
<div class="modal__mask" data-modal-close="close"></div>
</div>
<a href="#alert-3" data-modalopen="open" class="btn is-bgprimary">확인</a>
<div id="alert-3" data-modal="modal" class="modal">
<div class="alert">
<div class="alert__header">
<strong class="alert__title is-check">확인</strong>
<button data-modal-close="close" class="alert__close">닫기</button>
</div>
<div class="alert__text">
<p>텍스트 영역입니다. 텍스트 영역입니다. 텍스트 영역의 width 값을 초과하지 않도록 합니다. 3줄 이상일 경우 팝업 height가 늘어납니다.</p>
</div>
<div class="alert__footer">
<button data-modal-close="close" class="btn is-primary">취소</button>
<button data-modal-close="close" class="btn is-confirm">삭제</button>
</div>
</div>
<div class="modal__mask" data-modal-close="close"></div>
</div>
Scroll
Normal
<div class="component__scrollbars is-horizontal">
<div class="has-scrollbars">
<p style="width: 140rem;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis dolor quos optio fugiat beatae, veniam nesciunt minima quo nam inventore nemo hic facilis rerum deserunt recusandae fuga laborum neque consequatur!</p>
</div>
</div>
<div class="component__scrollbars">
<div class="has-scrollbars">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis dolor quos optio fugiat beatae, veniam nesciunt minima quo nam inventore nemo hic facilis rerum deserunt recusandae fuga laborum neque consequatur!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis dolor quos optio fugiat beatae, veniam nesciunt minima quo nam inventore nemo hic facilis rerum deserunt recusandae fuga laborum neque consequatur!</p>
<p style="padding-bottom: 1.5rem;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis dolor quos optio fugiat beatae, veniam nesciunt minima quo nam inventore nemo hic facilis rerum deserunt recusandae fuga laborum neque consequatur!</p>
</div>
</div>