728x90
반응형
버튼 클릭 시 레이어 팝업을 화면 중앙에 띄우는 방법입니다.
1. <head> </head> 태그 안에 제이쿼리를 불러옵니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2. HTML
<button type="button" class="btn_open">팝업 열기</button>
<div class="popup_box">
<div class="popup_cont">
팝업 내용
</div>
</div>
3. CSS
.btn_open { padding: 5px 10px; background: #759587; border: 0; color: #fff; cursor: pointer; }
#mask { display: none; width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); zoom: 1; opacity: 0.5; z-index: 9998; }
* html #mask { position: absolute; }
.popup_box { display: none; width: 300px; height: 300px; position: fixed; top: 50%; left: 50%; background: #fff; border: 1px solid #000; z-index: 9999; }
* html .popup_box { position: absolute; }
.popup_cont { padding: 20px; }
.btn_close { width: 30px; height: 25px; position: absolute; top: 0px; right: 0px; background: #000; border: 0; color: #fff; cursor: pointer; }
4. jQuery
$(function(){
$(".popup_box").hide()
$("body").append("<div id='mask'></div>");
$("#mask").click(function(){
$(this).hide();
$(".popup_box").hide();
});
$(".btn_open").click(function(){
$("#mask").show();
$(".popup_box").show().html("<button type='button' class='btn_close'>x</button>"+$("+div",this).html()).css({
marginTop:"-"+$(".popup_box").height()/2+"px" ,
marginLeft:"-"+$(".popup_box").width()/2+"px"
});
$(".btn_close").click(function(){
$("#mask").hide();
$(".popup_box").hide();
});
return false;
});
});
728x90
