- html 코드 내부에 레이어 팝업, 버튼 작성
- javascript를 이용해 클릭 이벤트 발생 시킴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#popup_layer {position:fixed;top:0;left:0;z-index: 10000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4);display:none;}
/*팝업 박스*/
#popup_box{border-radius:10px;position: relative;top:50%;left:50%; width:1120px;height:630px;transform:translate(-50%, -50%);z-index:1002;box-sizing:border-box;background:#fff;box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-webkit-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-moz-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);}
</style>
</head>
<body>
<script>
function showPopup(){
document.getElementById("popup_layer").style.display='inline'
}
</script>
<input type="button" value="팝업 열기" onclick="showPopup();">
<!--팝업창 레이아웃 html-->
<div id="popup_layer">
<div class="popup_box">
<!--팝업 컨텐츠 영역-->
<div class="popup_contents">
<h2>상세 팝업</h2>
</div>
</div>
</div>
</body>
</html>html body 태그 내에 div를 이용해 레이어 팝업 생성 시 보여지는 부분을 작성
이후 <script> 태그 내에서 마커 클릭시 실행할 함수 추가
마커 클릭 시 getElementById 메서드를 통해 popup_layer라는 id를 설정해두었던
팝업 div의 요소들을 읽어와서 화면 위에 뿌려준다
<위 설명을 바탕으로 작성한 html 예시>
상세 팝업
* 팝업 닫기가 구현되지 않아 팝업을 닫으려면 페이지 새로고침 필요