[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);
}
'공부 > JavaScript' 카테고리의 다른 글
[JQuery] 특정 단어가 포함된 행의 색깔 바꾸기 (0) | 2024.01.15 |
---|---|
[JQuery] 간단한 슬라이더 구현 코드 (0) | 2022.08.23 |
[JavaScript] 콜백을 인자로 갖는 JS함수 (Map 외 5건) (0) | 2022.06.12 |
[JavaScript] 코딩테스트에서 자주 쓰는 필수 API (0) | 2022.06.10 |
[JavaScript] Query String (0) | 2022.06.10 |