πŸ“ƒ λ²„νŠΌ 클릭 μ‹œ λ ˆμ΄μ–΄ μ°½ λ„μš°κΈ°

전주은·2022λ…„ 12μ›” 19일
JavaScriptjquery
0
post-thumbnail

πŸ“ƒ λ²„νŠΌ 클릭 μ‹œ λ ˆμ΄μ–΄ μ°½ λ„μš°κΈ°

πŸ‘€ 원리

divμ•ˆμ— λ‚΄μš©μ„ 보이지 μ•Šκ²Œ μ„€μ •ν•΄λ‘μ—ˆλ‹€κ°€(display : none) λ²„νŠΌμ„ ν΄λ¦­ν–ˆμ„λ•Œ λ³΄μ΄λ„λ‘ν•˜λŠ” (display:block) κΈ°λŠ₯μž…λ‹ˆλ‹€!
여기에 λ“€μ–΄κ°€λŠ” κ°œλ…μ€ λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

  1. [CSS] μ„ νƒμž

    id = "layer" -> #layer
    class = "layer" ->.layer

  2. [CSS] style - display : none <--> block

    display: none
    display: block

  3. [Javascript] DOM - document.getElementBy..

    document 객체의 λ©”μ†Œλ“œ

    getElementsByTagName(): ν•΄λ‹Ή νƒœκ·Έ μ΄λ¦„μ˜ μš”μ†Œλ₯Ό λͺ¨λ‘ 선택해 λ°°μ—΄λ‘œ μ €μž₯
    getElementById(): ν•΄λ‹Ή μ•„μ΄λ””μ˜ μš”μ†Œλ₯Ό 선택
    getElementsByClassname(): ν•΄λ‹Ή ν΄λž˜μŠ€μ— μ†ν•œ μš”μ†Œλ₯Ό λͺ¨λ‘ 선택해 λ°°μ—΄λ‘œ μ €μž₯
    getElementsByName(): ν•΄λ‹Ή name 속성값을 κ°€μ§€λŠ” μš”μ†Œλ₯Ό λͺ¨λ‘ 선택해 λ°°μ—΄λ‘œ μ €μž₯
    querySelectorAll(): μ„ νƒμžλ‘œ μ„ νƒλ˜λŠ” μš”μ†Œλ₯Ό λͺ¨λ‘ 선택해 λ°°μ—΄λ‘œ μ €μž₯

  4. [Javascript] function

function openLayer(){
	document.getElementById('popup_layer').style.display='block';
} 
function closeLayer(){
    document.getElementById('popup_layer').style.display='none';
}
  1. 이벀트 λ¦¬μŠ€λ„ˆ vs inline 이벀트

    이벀트 등둝

    객체.addEventListner(이벀트λͺ…, μ‹€ν–‰ν• μ΄λ²€νŠΈλ¦¬μŠ€λ„ˆ, μ΄λ²€νŠΈμ „νŒŒλ°©μ‹);
    이벀트 νƒ€μž… : 이벀트 λ¦¬μŠ€λ„ˆλ₯Ό 등둝할 이벀트 νƒ€μž…
    μ‹€ν–‰ν•  이벀트 λ¦¬μŠ€λ„ˆ : μ§€μ •λœ μ΄λ²€νŠΈκ°€ λ°œμƒν–ˆμ„ λ•Œ μ‹€ν–‰ν•  이벀트 λ¦¬μŠ€λ„ˆ
    이벀트 μ „νŒŒ 방식 : falseλ©΄ 버블링(bubbling) 방식, trueλ©΄ 캑처링(capturing) 방식

    이벀트 제거

    객체.removeEventListner(μ΄λ²€νŠΈνƒ€μž…, μ΄λ²€νŠΈλ¦¬μŠ€λ„ˆ);

방법1: javascript ν™œμš©

step1.λ ˆμ΄μ–΄ div을 λ§Œλ“€κ³  id 뢙이기 - λ ˆμ΄μ–΄μ˜ μ΄ˆκΈ°μƒνƒœλ₯Ό 보이지 μ•Šκ²Œ 숨기기

<div class="popup_layer" id="popup_layer" style="display: none;">

μŠ€νƒ€μΌ 섀정이 핡심!

.popup_overlay{position: fixed;}	
//슀크둀이 κΈΈλŒ€ μ œμžλ¦¬μ— λ– μžˆλ„λ‘
.popup_box{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);} 
// νŒμ—…μ°½ 화면이 κ°€μš΄λ°μ— λ– μžˆλ„λ‘
.popup_btn {display:table; table-layout: fixed;}	
//λ²„νŠΌμ΄ λͺ‡κ°œλ‘œ λŠ˜μ–΄λ‚˜λ„ 간격 맞좰 μ •λ ¬
.popup_btn a{display: table-cell;}

step2. λ ˆμ΄μ–΄μ†μ— μ›ν•˜λŠ” λ‚΄μš© μ±„μš°κΈ°

step3. aνƒœκ·Έ hrefλ₯Ό 톡해 μž‘μ„±ν•œ ν•¨μˆ˜μ„ 호좜

<a href="javascript:openPop()">μ •μ‚°κ³„μ’Œ 등둝</a>
<a href="javascript:closePop();">λ‹«κΈ°</a>

step4. μžλ°” 슀크립트 ν•¨μˆ˜ μ™„μ„±

<script>
function openPop(){
	document.getElementById('popup_layer').style.display='block';
}
function closePop(){
    document.getElementById('popup_layer').style.display='none';
}
</script>

예제) μ€ν–‰κ³„μ’Œ μΆ”κ°€ ν•˜κΈ°

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>μ •μ‚°κ³„μ’Œ 등둝</title>
</head>
<style>
/*popup*/
.popup_layer {position:fixed;top:0;left:0;z-index: 10000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); }
/*νŒμ—… λ°•μŠ€*/
.popup_box{position: relative;top:50%;left:50%; overflow: auto; height: 600px; width:375px;transform:translate(-50%, -50%);z-index:1002;box-sizing:border-box;background:#fff;box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-webkit-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-moz-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);}
/*컨텐츠 μ˜μ—­*/
.popup_box .popup_cont {padding:50px;line-height:1.4rem;font-size:14px; }
.popup_box .popup_cont h2 {padding:15px 0;color:#333;margin:0;}
.popup_box .popup_cont p{ border-top: 1px solid #666;padding-top: 30px;}

/*μ˜€λ²„λ ˆμ΄ λ’·λ°°κ²½*/
.popup_overlay{position:fixed;top:0px;right:0;left:0;bottom:0;z-index:1001;;background:rgba(0,0,0,0.5);}
/*popup*/
</style>
<body>
    
    <a href="javascript:openPop()">μ •μ‚°κ³„μ’Œ 등둝</a>
    <div class="popup_layer" id="popup_layer" style="display: none;">
        <div class="popup_box">
            <div style="height: 10px; width: 375px; float: top;">
            <a href="javascript:closePop();"><span class="m_header-banner-close" width="30px" height="30px">x</span></a>
            </div>
            <!--νŒμ—… 컨텐츠 μ˜μ—­ μ‹œμž‘ -->
            <div class="popup_cont">
                <div class="account_registration">
                    <div class="input_logistics_companies input_box">
                        <h3 class="input_title">은행λͺ…</h3>
                        <div class="input_item">
                            <div class="bank_option open">
                                <label class="selected_txt" id="selected_txt">
                                    <span>은행 선택</span>
                                </label>
                                <select id="bank_select" name="bank">
                                    <option value="ꡭ민은행"> ꡭ민은행 </option>
                                    <option value="μ‹ ν•œμ€ν–‰"> μ‹ ν•œμ€ν–‰ </option>
                                    <option value="μš°λ¦¬μ€ν–‰"> μš°λ¦¬μ€ν–‰ </option>
                                    <option value="ν•˜λ‚˜μ€ν–‰"> ν•˜λ‚˜μ€ν–‰ </option>
                                    <option value="기업은행"> 기업은행 </option>
                                    <option value="λ†ν˜‘μ€ν–‰"> λ†ν˜‘μ€ν–‰ </option>
                                    <option value="SC은행"> SC은행 </option>
                                    <option value="ν•œκ΅­μ”¨ν‹°μ€ν–‰"> ν•œκ΅­μ”¨ν‹°μ€ν–‰ </option>
                                    <option value="우체ꡭ"> 우체ꡭ </option>
                                    <option value="λ†ν˜‘μ€ν–‰"> λ†ν˜‘μ€ν–‰ </option>
                                    <option value="산업은행"> 산업은행 </option>
                                    <option value="뢀산은행"> 뢀산은행 </option>
                                    <option value="μΉ΄μΉ΄μ˜€λ±…ν¬"> μΉ΄μΉ΄μ˜€λ±…ν¬ </option>
                                    <option value="λŒ€κ΅¬μ€ν–‰"> λŒ€κ΅¬μ€ν–‰ </option>
                                    <option value="케이뱅크"> 케이뱅크 </option>
                                    <option value="광주은행"> 광주은행 </option>
                                    <option value="μ œμ£Όμ€ν–‰"> μ œμ£Όμ€ν–‰ </option>
                                    <option value="μˆ˜ν˜‘μ€‘μ•™νšŒ"> μˆ˜ν˜‘μ€‘μ•™νšŒ </option>
                                    <option value="전뢁은행"> 전뢁은행 </option>
                                    <option value="μ§€μ—­λ†μΆ•ν˜‘"> μ§€μ—­λ†μΆ•ν˜‘ </option>
                                    <option value="경남은행"> 경남은행 </option>
                                    <option value="μƒˆλ§ˆμ„κΈˆκ³ μ—°ν•©νšŒ"> μƒˆλ§ˆμ„κΈˆκ³ μ—°ν•©νšŒ </option>
                                    <option value="μ‹ ν˜‘"> μ‹ ν˜‘ </option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="input_box" id="account_input_box">
                        <h3 class="input_title">κ³„μ’Œλ²ˆν˜Έ</h3>
                        <div class="input_item">
                            <input type="text" placeholder="'-' 없이 μž…λ ₯ν•˜μ„Έμš”" autocomplete="off" class="input_txt text_fill" id="account_input" name="account_number">
                        </div>
                        <p class="input_error" id="account_input_error"></p>
                    </div>
                    <div class="input_box" id="name_input_box">
                        <h3 class="input_title">예금주</h3>
                        <div class="input_item">
                            <input type="text" placeholder="예금주λͺ…을 μ •ν™•νžˆ μž…λ ₯ν•˜μ„Έμš”." autocomplete="off" class="input_txt text_fill" id="name_input" name="name">
                        </div>
                        <p class="input_error" id="name_input_error"></p>
                    </div>
                </div>
                <div class="registration_btn_box">
                    <a disabled="disabled" type="button" class="btn btn_save solid medium disabled"> μ €μž₯ν•˜κΈ° </a><a href="javascript:closePop();">λ‹«κΈ°</a>
                </div>
            </div>
            <!--νŒμ—… 컨텐츠 μ˜μ—­ 끝-->
        </div>
    </div>
</body>
<script>
function openPop(){
	document.getElementById('popup_layer').style.display='block';
}
function closePop(){
    document.getElementById('popup_layer').style.display='none';
}
</script>
</html>

방법2 jquery ν™œμš©

step0. head에 jquery μΆ”κ°€

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

step1. λ ˆμ΄μ–΄ div을 λ§Œλ“€κ³  id 뢙이기

step2. divμ•ˆμ— μ›ν•˜λŠ” λ‚΄μš© μ±„μš°κΈ°

step3. λ²„νŠΌ λ§Œλ“€κ³  id 뢙이기 (aλŒ€μ‹  λ§Œλ“€κΈ°)

<button type="button" id="openModalPop">λͺ¨λ‹¬ λ ˆμ΄μ–΄νŒμ—… μ—΄κΈ°</button>
<div id="close_button" style ="cursor: pointer;">x</div>

step4. jquery둜 μ΄λ²€νŠΈμ™€ 효과 λΆ€μ—¬ν•˜κΈ° (javascript λŒ€μ‹  λ„£κΈ°)

기본문법: https://soft91.tistory.com/9 μ°Έκ³ 

//κΈ°λ³Έ ν‹€
$("λ²„νŠΌμ„ νƒμž").μ΄λ²€νŠΈλ“±λ‘λ©”μ„œλ“œ(function() {
        $("λ‚΄μš©μ°½μ„ νƒμž").νš¨κ³Όλ©”μ„œλ“œ;
        $("λͺ¨λ‹¬μ°½μ„ νƒμž").νš¨κ³Όλ©”μ„œλ“œ;
});

<script type="text/javascript">
$(document).ready(function() {

    $("#openModalPop").click(function() {
        $(".popup_box").fadeIn();
        $("#popup_layer").fadeIn();
    });

    $("#close_button").click(function(){
        $(".popup_box").fadeOut();
        $("#popup_layer").fadeOut();
    });
});
</script>
profile
전주은
이전 포슀트

Github-flow : git 브랜치 μ „λž΅

λ‹€μŒ 포슀트

[Spring] MVC ꡬ쑰 λ§Œλ“€κΈ°

0개의 λŒ“κΈ€