Popup

Modal Popup

default size : 1100 x 700 (px) / 팝업의 최대 높이값은 700px을 초과하지 않도록합니다.
조회영역 : 2단으로 배치합니다.
bottom : 하단 버튼영역은 고정됩니다.
modal__mask의 data-modal-close="close" 유무로 닫기 옵션을 설정 할 수 있습니다.

          
    <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줄을 초과하지 않는것을 권장합니다.

경고/삭제 에러 확인

          
    <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

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!

          
    <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>