[JQuery] 레이어 팝업 띄우기

2023. 11. 26.공부/JavaScript

728x90

HTML

            <ul class="rule-wrap">
              <ul class="inner-txt-rule">
                <li class="checkbox-area1">
                  <input type="checkbox" name="agree" id="agree1" value="checkbox1" tabindex="4" onClick="modalPopupOpen('#essentialPolicy');">
                  <label for="agree">
                    <span>
                      [필수]
                    </span>
                    대표자 개인(신용)정보수집·이용·제공·조회 동의
                    <a class="rule_btn_detailed1" onClick="modalPopupOpen('#essentialPolicy');">
                      <img src="./img/ico_btn_arrow_down.png" alt="더보기 버튼">
                    </a>
                  </label>
                </li>
                <div class="essentialPolicy" style="display: none;">
                  <p>Lorem, ipsum</p>
                </div>
              </ul>

 

  <!-- 필수 대표자 개인(신용)정보수집·이용·제공·조회 동의 팝업 -->
  <div class="backgroundPop authRequest" id="essentialPolicy" onClick="modalPopupClose('#essentialPolicy');"
    style="display: none;">
    <div class="popInnerBox">
      <div class="popHead">
        <span>
          대표자 개인(신용)정보수집·이용·제공·조회 동의
        </span>
        <img src="./img/btn_layer_close.png" alt="x" onClick="modalPopupClose('#essentialPolicy');">
      </div>
      <div class="popBody">
        <div class="terms">
          <div class="terms-inner">
            <div class="item">
              <p class="text">
                Lorem ipsum
              </p>
              <p class="tit">1. 수집·이용에 관한 사항</p>
              <ul class="list">
                <li>• 수집·이용 목적</li>
                <ul class="list listStyle01">
                  <li>기업신용평가 및 사업체 및 사업장 현황조사</li>
                </ul>
              </ul>
              <ul class="list">
                <li>• 수집·이용 항목</li>
                <ul class="list listStyle01">
                  <li>필수적 정보
                    <ul>
                      <li>개인식별정보: 성명, 주민등록번호, 주소, 연락처</li>
                    </ul>
                  </li>
                  <li>선택적 정보
                    <ul>
                      <li>
                        개인식별정보 외에 고객이 제공한 정보: 자격증, 수상경력 등
                      </li>
                      ※ 본 동의 이전에 발생한 개인(신용)정보도 포함됩니다.
                    </ul>
                  </li>
                </ul>
              </ul>
              <ul class="list">
                <li>• 보유·이용 기간</li>
              </ul>
              <ul class="list">
                <li>• 동의를 거부할 권리 및 동의를 거부할 경우의 불이익 </li>
              </ul>
            </div>
          </div>
          <div class="btn_bottom" onclick="modalPopupClose('#essentialPolicy');">
            <span>확인</span>
          </div>
        </div>
      </div>
    </div>
  </div>

 

JavaScript

function modalPopupOpen(object) {
      $(object).show();
}
    
function modalPopupClose(object) {
      $(object).hide();
      const checked1 = $('#agree1').is(":checked");
      $('#agree1').prop('checked', false);
}