[jQuery] 간단 팝업창 만들기!

추가하기 버튼을 누르면 추가 팝업창이 뜨고,

닫는 버튼(아이콘 이미지)나 저장 버튼을 클릭하면 창이 닫히는 팝업창이다.

 

<!-- HTML -->
<div class="insert_btn" >아이콘 추가</div>

<div id="iPopup">
	아이콘 추가하기
	<img class="p_close_btn" src="../img/x-box.png" alt="닫기" />

	<input type="button" class="p_insert_btn" value="추가" />
</div>

/* CSS */
.insert_btn {
    display: inline-block;
    width: 65px;
    height: 33px;
    line-height: 33px;
    text-align: center;
    font-size: 15px;
    color: white;
    border-radius: 5px;
    background-color: var(--button-color);
    cursor: pointer;
}

#iPopup {
	display:none;
}

#iPopup {
	width: 400px;
    background-color: white;
    border: 1px solid #808080;
    border-radius: 3px;
    box-shadow: 1px 1px 8px 1px #e4e4e4;
    position: absolute;
    top: -27px;
    left: calc(50% - 200px);
    z-index: 2;
}

.p_close_btn {
	width: 25px;
    height: 25px;
    line-height: -16px;
    float: right;
    margin: 12px;
    opacity: .7;
    cursor: pointer;
}

.p_insert_btn {
    display: inline-block;
    width: 65px;
    height: 33px;
    line-height: 33px;
    text-align: center;
    font-size: 15px;
    color: white;
	border: none;
    border-radius: 5px;
    background-color: var(--button-color);
	box-shadow: var(--btn-shadow);
    cursor: pointer;
}

.p_insert_btn:hover {
	background-color: var(--hover-color);
}

(보기 좋게 내용물은 지웠음.)

 

<script type="text/javascript">
$(document).ready(function() {
	//아이콘 추가 팝업창
	$(".insert_btn").on("click", function(event) { 
		$("#iPopup").show();  
	});
    
    $("body").on("click", function(event) { 
		if(event.target.className == 'p_close_btn' 
		 || event.target.className == 'p_insert_btn'){
			$("#iPopup").hide();
		}
	}); //아이콘 추가 팝업창 끝
});
</script>

 

 

결과물

 

 

 

 

+ 추가로,

팝업창 열 때마다 배경이 되는 div 하나 만드는 기능도 더해서 팝업 뒤를 어둡게 만들 수도 있고

배경 클릭해서 팝업창 닫게 할 수도 있다.

//script
	//아이콘 추가 팝업창
	$(".insert_btn").on("click", function(event) {
		$("#iPopup").show();  
		$("body").append('<div class="p_back"></div>');
	});
    
    $("body").on("click", function(event) { 
		if(event.target.className == 'p_close_btn' 
				|| event.target.className == 'p_insert_btn'
				|| event.target.className == 'p_back'){
			$("#iPopup").hide();
			$(".p_back").hide();
			$(".p_back").remove();
		}
	}); //아이콘 추가 팝업창 끝

/* CSS 추가 */
.p_back {
	content: "";
	width: 100%;
	height: 100%;
	background: #00000054;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}

 

생각보다 너무 간단해서 팀프로젝트에 바로 적용하였음!