2017년 12월 25일 월요일

jQuery를 사용한 레이어 팝업 화면 가운데 띄우기

       댓글 없음    
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
    return this;
}
showPopup = function() {
$("#popLayer").show();
$("#popLayer").center();
}
</script>
<style>
#popLayer{
  display: none;
  width: 100px;
  height: 50px;
  border: 1px solid red;
}
</style>
</head>
<body>
<a href="javascript:;" onclick="javascript:showPopup()">팝업띄우기</a>
</body>
<div id="popLayer" style="display:none;">
<div>팝업 레이어입니다.</div>
<div>
</body>
</html>


출처 : http://fact119.com/x/board_XLuz31/1012
Share:

0 개의 댓글:

댓글 쓰기