[JavaScript 자바스크립트] 회원가입 약관동의 "자세히" 창 나타내기

1. 코드 관리 쉽게 새로운 jsp 만들기

 

2. controller에서 화면 매핑

@RequestMapping("privacyAgree")
public String privacyAgree() {
    return "top/agree/privacyAgree";
}

@RequestMapping("dbelleAgree")
public String dbelleAgree() {
    return "top/agree/dbelleAgree";
}

@RequestMapping("marketingAgree")
public String marketingAgree() {
    return "top/agree/marketingAgree";
}

 

 

3. 회원가입.jsp

"onclick="javascript:openWin1()" 기반으로 js 코드 작성

<div class="form-floating">
    <div class="btn btn-link">
        <input type="checkbox" id="checkAll" name="checkAll"> 
            <label for="checkAll"> 약관 전체 동의하기</label>
    </div>
    <p></p>
    <div class="btn btn-link">
        <input type="checkbox" id="privacyAgreeCheckbox" name="privacyAgreeCheckbox" class="normal">
             <label for="privacyAgreeCheckbox"> [필수] 개인정보 수집 및 이용 동의 </label> 
        <button class="d-inline-block border rounded-pill text-primary px-4 mb-3" onclick="javascript:openWin1()" >자세히</button>

    </div>
    <div class="btn btn-link">
        <input type="checkbox" id="dbelleAgreeCheckbox" name="dbelleAgreeCheckbox" class="normal">
             <label for="dbelleAgreeCheckbox"> [필수] dbelleArt, dbelleArt 스토어 이용 악관 </label>
        <button class="d-inline-block border rounded-pill text-primary px-4 mb-3" onclick="javascript:openWin2()">자세히</button>
    </div>


    <div class="btn btn-link">
        <input type="checkbox" id="marketingAgreeCheckbox" name="marketingAgreeCheckbox"  class="normal">
             <label for="marketingAgreeCheckbox"> [선택] 마케팅 활용 및 광고성 정보 수신 동의 </label>
                <button class="d-inline-block border rounded-pill text-primary px-4 mb-3" onclick="javascript:openWin3()">자세히</button>
    </div>

    <br/>
    <span id="vaildEssential"></span>

</div>

 

4. js

"/ " -> 매핑된 주소 입력

function openWin1() {
    window.open("/privacyAgree", "약관동의", "width=600, height=800, toolbar=no, menubar=no, scrollbars=no, resizable=yes")
}

function openWin2() {
    window.open("/dbelleAgree", "약관동의", "width=600, height=800, toolbar=no, menubar=no, scrollbars=no, resizable=yes")
}

function openWin3() {
    window.open("/marketingAgree", "약관동의", "width=600, height=800, toolbar=no, menubar=no, scrollbars=no, resizable=yes")
}

 

5. 팝업 창 활성