고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
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://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup
반응형
'IT공부방 > jQuery, ajax, java' 카테고리의 다른 글
| blueimp jQuery Fileupload 파일업로드 파일명 중복시에 덮어씌우기 (0) | 2016.08.30 |
|---|---|
| jQuery FileUpload Plugin 파일업로드시 업로드 위치 동적변경하기 (0) | 2016.08.30 |
| javascript 숫자계산시 .. 소수점오류 수정하기 toFixed() , parseFloat() (0) | 2016.08.23 |
| ajax 로 폼데이터 서버전송 후 파일생성 및 DB저장, serialize() (0) | 2016.08.09 |
| nodejs 및 jQuery 를 이용한 서버와의 통신 참고하기 (0) | 2016.08.05 |
댓글 영역