팝업창 뜰때 배경색 어둡게 처리하기
본문
G5에 있는 팝업창 기능을 이용해서 팝업창을 띄울때
팝업창 외의 화면 전체 배경을 어둡게 처리하는 방법이 있을까요?
팝업창 newwin.inc.php 파일 안에 스타일을 추가해서 하면 되는건지,
팝업창이 뜰때 전체화면 배경을 어둡게 처리하는 방법을 알고 싶습니다.
팝업창을 닫으면 다시 원래 배경으로 돌아오게요.
도움 부탁 드립니다.
답변 2
다음과 같이 해볼 수 있을것 같습니다.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Page</title>
<link rel="stylesheet" href="styles.css"> <!-- 스타일 시트 연결 -->
</head>
<body>
<button id="openPopup">팝업 열기</button>
<div id="overlay"></div>
<div id="popup" class="hidden">
<!-- 팝업 내용 추가 -->
<iframe src="newwin.inc.php"></iframe>
<button id="closePopup">닫기</button>
</div>
<script src="script.js"></script> <!-- JavaScript 파일 연결 -->
</body>
</html>
styles.css 파일을 생성하여 아래와 같이 스타일을 추가함.
body {
font-family: Arial, sans-serif;
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 어두운 배경 */
z-index: 1;
display: none;
}
#popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
z-index: 2;
display: none;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
JavaScript 추가
document.getElementById("openPopup").addEventListener("click", function() {
document.getElementById("overlay").style.display = "block";
document.getElementById("popup").style.display = "block";
});
document.getElementById("closePopup").addEventListener("click", function() {
document.getElementById("overlay").style.display = "none";
document.getElementById("popup").style.display = "none";
});
이렇게 설정하면 팝업이 열릴 때 어두운 배경이 화면 전체를 덮고, 팝업을 닫으면 배경이 사라집니다.
참고 하셔서 원하시는 형식으로 구현해 보세요
상세한 설명과 답변 감사 합니다.
화면 전체을 덥는 레이어를 만들고 그 위에 팝업을 띄우는 겁니다.
제가 사용하는 소스입니다.
팝업을 닫을때.. 레이어도 같이 닫아주세요.
$("#dimmed).hide();
<div id="dimmed" class="dimmed"></div>
<style>
.dimmed {
position: fixed;
top: 0;
right: 0;
bottom: 0px;
left: 0;
z-index: 2000;
width: 100%;
height: 100%;
background-color: #000;
opacity: .6;
filter: alpha(opacity=50);
}
</style>
답변 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
