Javascript 와 CSS 를 이용하여 만든 PopUp 창 띄우기
<!DOCTYPE html>
<html>
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
margin-top:30px;
}
/* The actual popup */
.popup .popup_info {
visibility: hidden;
width: 250px;
height: 80px;
background-color: #FEF3EA;
border:1px solid #C07C40;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -120px;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
animation: fadeIn 1s;
}
</style>
<body style="text-align:center">
<p style="margin-top:50px;">Javascript 와 CSS 를 이용하여 PopUp창을 띄우는 예제입니다</p>
<div class="popup" onclick="myFunction()">
<input type = "button" value = " 확인 ">
<span class="popup_info" id="myPopup">
팝업내에 표시되는 내용입니다
</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById('myPopup');
popup.classList.toggle('show');
}
</script>
</body>
</html>
출처: http://doolyit.tistory.com/53 [동해둘리의 IT Study]