📃 버튼 클릭 시 레이어 창 띄우기

전주은·2022년 12월 19일

📃 버튼 클릭 시 레이어 창 띄우기

👀 원리

div안에 내용을 보이지 않게 설정해두었다가(display : none) 버튼을 클릭했을때 보이도록하는 (display:block) 기능입니다!
여기에 들어가는 개념은 다음과 같습니다.

[CSS] 선택자

id = "layer" -> #layer
class = "layer" ->.layer
[CSS] style - display : none <--> block

display: none
display: block
[Javascript] DOM - document.getElementBy..

document 객체의 메소드

getElementsByTagName(): 해당 태그 이름의 요소를 모두 선택해 배열로 저장
getElementById(): 해당 아이디의 요소를 선택
getElementsByClassname(): 해당 클래스에 속한 요소를 모두 선택해 배열로 저장
getElementsByName(): 해당 name 속성값을 가지는 요소를 모두 선택해 배열로 저장
querySelectorAll(): 선택자로 선택되는 요소를 모두 선택해 배열로 저장
[Javascript] function

function openLayer(){
	document.getElementById('popup_layer').style.display='block';
} 
function closeLayer(){
    document.getElementById('popup_layer').style.display='none';
}

이벤트 리스너 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>

전주은

이전 포스트

Github-flow : git 브랜치 전략

다음 포스트

📃 버튼 클릭 시 레이어 창 띄우기

📃 버튼 클릭 시 레이어 창 띄우기

👀 원리

document 객체의 메소드

이벤트 등록

이벤트 제거

방법1: javascript 활용

예제) 은행계좌 추가 하기

방법2 jquery 활용

Github-flow : git 브랜치 전략

[Spring] MVC 구조 만들기

0개의 댓글