답변 2개
다음과 같이 해볼 수 있을것 같습니다.
html
</p>
<p><!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></p>
<p>
styles.css 파일을 생성하여 아래와 같이 스타일을 추가함.
</p>
<p>body {
font-family: Arial, sans-serif;
}</p>
<p>#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 어두운 배경 */
z-index: 1;
display: none;
}</p>
<p>#popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
z-index: 2;
display: none;
}</p>
<p>iframe {
width: 100%;
height: 100%;
border: none;
}
JavaScript 추가
</p>
<p>document.getElementById("openPopup").addEventListener("click", function() {
document.getElementById("overlay").style.display = "block";
document.getElementById("popup").style.display = "block";
});</p>
<p>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개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인