728x90
반응형
버튼 클릭 시 레이어 팝업을 화면 중앙에 띄우는 방법입니다.
1. <head> </head> 태그 안에 제이쿼리를 불러옵니다.
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
2. CSS
#mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); zoom: 1; opacity: 0.5; z-index: 9998; display: none; }
.btn_open { padding: 5px 10px; background: #000; border: 0; color: #fff; cursor: pointer; }
.popup_box { display: none; width: 280px; height: 300px; background: #fff; border: 1px solid #333; }
.popup_cont { padding: 20px; }
.popup_close { width: 100%; padding: 5px 0; background: #333; color: #fff; text-align: right; position:absolute; bottom: 0; }
.btn_close { margin: 5px; background: none; border: 0; color: #fff; cursor: pointer; }
3. HTML
<button type="button" class="btn_open">팝업 열기</button>
<div id="mask"></div>
<div class="popup_box">
<div class="popup_cont">
팝업 내용
</div>
<div class="popup_close">
<button type="button" class="btn_close">팝업 닫기</button>
</div>
</div>
4. Script
<script type="text/javascript">
$(document).ready(function() {
$(".btn_open").click(function() {
$(".popup_box").show();
$("#mask").fadeIn(100);
});
$(".btn_close").click(function() {
$(".popup_box").hide();
$("#mask").fadeOut(100);
});
// 팝업 중앙 정렬
var $layerPopup = $(".popup_box");
var left = ($(window).scrollLeft() + ($(window).width() - $layerPopup.width()) / 2);
var top = ($(window).scrollTop() + ($(window).height() - $layerPopup.height()) / 2 );
$layerPopup.css({ "left": left, "top":top, "position": "absolute" });
$("body").css("position", "relative").append($layerPopup);
});
</script>
728x90
