<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>팝업</title>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="popup.js"></script>
</head>
<body>
<p>
<a href="#popup1" class="popup_btn">버튼</a>
</p>
<div id="popup1" class="popup">
<div class="popup_inner">
<h4>제목</h4>
<p>내용내용내용</p>
<p>내용내용내용</p>
<p>내용내용내용</p>
<p>내용내용내용</p>
<div>
<a href="#close_btn" class="close_btn">닫기</a>
</div>
</div>
</div>
<div id="overlay"></div>
</body>
</html>
/* common setting */
.popup {
display: none;
position;
top: 50%;
left: 50%;
background-color: #fff;
overflow: hidden;
z-index: 101;
}
.popup_inner {
padding: 20px;
}
#overlay {
display: none;
position;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.7;
z-index: 100;
}
/* individual setting */
#popup1 {
width: 600px;
}
$(function() {
$(document)
.on('click', '.popup_btn', function() {
var popup = $(this).attr('href');
var mT = ($(popup).outerHeight() / 2) * (-1) + 'px';
var mL = ($(popup).outerWidth() / 2) * (-1) + 'px';
$('.popup').hide();
$(popup).css({
'margin-top': mT,
'margin-left': mL
}).show();
$('#overlay').show();
return false;
})
.on('click', '.close_btn, #overlay', function() {
$('.popup, #overlay').hide();
return false;
});
});
'html5' 카테고리의 다른 글
| vue.js 시작 (0) | 2018.10.21 |
|---|---|
| html form 샘플 (0) | 2016.11.10 |
| 완성! (0) | 2014.09.16 |
| 프로그래스바 실시간으로 변경하기... (0) | 2014.09.16 |
| video player play 기능 추가 (0) | 2014.09.16 |