답변 2개
다음과 같이 해볼 수 있을것 같습니다.
html
Main Page
팝업 열기
닫기
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";
});이렇게 설정하면 팝업이 열릴 때 어두운 배경이 화면 전체를 덮고, 팝업을 닫으면 배경이 사라집니다.
참고 하셔서 원하시는 형식으로 구현해 보세요
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
화면 전체을 덥는 레이어를 만들고 그 위에 팝업을 띄우는 겁니다.
제가 사용하는 소스입니다.
팝업을 닫을때.. 레이어도 같이 닫아주세요.
$("#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>
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인