반응형
<style>
#popup {
position: fixed;
top: 28%;
left: 30%;
transform: translate(-50%, -50%);
width: 500px;
height: 400px;
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
z-index: 100;
display: none;
}
#popup h2 {
margin-top: 0;
}
#popup button {
margin-top: 10px;
}
</style>
<body onload="openPopup()">
<div id="popup">
<h2>팝업창 제목</h2>
<P> 내용 </P>
<button onclick="closePopup()">닫기</button>
</div>
<script>
function openPopup() {
document.getElementById("popup").style.display = "block";
}
function closePopup() {
document.getElementById("popup").style.display = "none";
}
</script>
반응형
'Web' 카테고리의 다른 글
| 호스팅에 도메인 서로 다른 페이지 이동하기 (0) | 2024.02.23 |
|---|---|
| 티스토리 에드센스 자동 광고에 여백 주기 (5) | 2023.01.01 |
| 드림위버CC에서 테이블 드래그해서 선택 (0) | 2022.11.17 |
| 드림위버CC 하단 바 활성화하여 예전 스타일로 변경 (0) | 2022.11.17 |
| XAMPP를 사용한 그누보드 설치하기 (0) | 2021.10.07 |