[jquery] 레이어 팝업 스크롤 막기 & 배경 어둡게 처리하기

[jquery] 레이어 팝업 스크롤 막기 & 배경 어둡게 처리하기

안녕하세요. 

사용성을 위해서 팝업 뒤에 쉐도우효과랑, 팝업 스크롤을 막아주는 것을 원하는 경우가 더러 있습니다.

그래서 오늘은 레이어 팝업 스크롤막기, 배경 어둡게 처리하는 방법에 대해 알아보겠습니다.

팝업 가운데 정렬 css도 있으니 필요하신 분들은 함께 참고하세요!

본 예제에서는 버튼 클릭시, 레이어팝업이 보여지는 방식입니다~

 

 

---

 

예제 화면 미리보기

 

html

<div class="wrap">
	<button type="button" onclick="javascript:openPopup('modal1');" class="modal1">팝업열기</button>
	
	<div class="shadow"></div>
	<div class="popup modal1">
		<button type="button" onclick="closePopup()" class="close">X</button>
		<p>팝업입니다.</p>
	</div>
</div>

 

 

CSS

/* 스크롤 효과 확인하기 위한 height 넣을 필요 X*/
body {height: 1500px}
		
/* 팝업 기본디자인 */
.popup{border: 1px solid #dcdcdc;position: fixed;width: 500px;left: 50%;top: 50%;transform: translate(-50%,-50%);padding: 10px;display: none;background: #fff}
.popup .close{background: none;border: 0;position: absolute;right: 10px;top: 10px;font-size: 20px;}
		
/* 쉐도우 효과*/
.shadow{position: fixed;left: 0;top: 0;background: rgba(0, 0, 0, 0.52);width: 100%;height: 100vh;display: none}

 

 

JQUERY

// 팝업 열기 
function openPopup(modalname) {
	document.get
	$('.' + modalname).show();
	$(".shadow").show(); // 배경 어둡게
			
	//스크롤 막기
	$('.wrap').on('scroll touchmove mousewheel', function(event) {
		event.preventDefault();
		event.stopPropagation();
		return false;
		});
	}
	
    // 팝업 닫기
	function closePopup(flag) {
		$('.popup').hide(); //팝업을 닫기다.
		$('.shadow').hide(); // 배경 어둡게 삭제
		//스크롤 막기 해제
		$('.wrap').off('scroll touchmove mousewheel');
	};