레이어 팝업 질문드립니다..
본문
각 링크 클릭시 레이어로 팝업을 띄우려고 하는데요
레이어팝업 1클릭하면 팝업된 레이어1이 나오도록이요..
현재는 레이어팝업1 클릭하면 팝업된레이어 1,2,3이 모두 나오네요..
어디를 손봐야할까요
body {
font-size: 12px;
color: #FFFFFF;
font-family: "굴림";
}
#layer_pop{position:fixed; width:100%; height:2000px; top:0px; left:0px; background:url('./images/dark_bg.png'); display:none;}
#layer_pop .pop_cont{position:absolute;}
.btn_close{display:block; font-weight:bold; color:#FFFFFF; padding:3px; text-align:right;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
popConfig();
});
function popConfig(){
$(".btn_open").click(layerOpen);
$(".btn_close").click(layerClose);
}
function layerOpen(){
$("#layer_pop").css("display","block");
var tx = ($(window).width()-$("#layer_pop .pop_cont").width())/2;
var ty = ($(window).height()-$("#layer_pop .pop_cont").height())/2;
$("#layer_pop .pop_cont").css({left:tx+"px",top:ty+"px"});
$("body").css("overflow","auto");
}
function layerClose(){
$("#layer_pop").css("display","none");
$("body").css("overflow","auto");
}
</script>
</head>
<table cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="60"></td>
</tr>
<tr>
<td>
<a href="#" class="btn_open">
레이어팝업1
</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="btn_open">
레이어팝업2
</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="btn_open">
레이어팝업3
</a>
</td>
</tr>
</table>
<div id="layer_pop">
<div class="pop_cont">
팝업된 레이어1
</div>
</div>
<div id="layer_pop">
<div class="pop_cont">
팝업된 레이어2
</div>
</div>
<div id="layer_pop">
<div class="pop_cont">
팝업된 레이어3
</div>
</div>
</html>
답변 2
우선 id는 중복되지 않아야 합니다.
<div id="layer_pop"> 이것들을 <div id="layer_pop1"> 이런식으로 숫자를 붙여주시구요
<a href="#" class="btn_open"> 여기에 각각 <a href="#" class="btn_open" data-target="#layer_pop1"> 이런식으로 넣어주신다음 스크립트에서는 대상에 대해서 각기 처리하도록 해주면 되겠네요.
function popConfig(){
$(".btn_open").click(layerOpen($(this).data('target')); return false;);
$(".btn_close").click(layerClose($(this).data('target')); return false;);
}
function layerOpen(target){
if(target==undefined) return false;
$(target).show();
var tx = ($(window).width()-$(target+" .pop_cont").width())/2;
var ty = ($(window).height()-$(target+" .pop_cont").height())/2;
$("#layer_pop .pop_cont").css({left:tx+"px",top:ty+"px"});
$("body").css("overflow","auto");
}
function layerClose(target){
if(target==undefined) return false;
$(target).hide();
$("body").css("overflow","auto");
}
검증은 안해봤습니다만 이런식이면 되지 않을까 합니다.
감사합니다! 근데 안되요 ㅠㅠㅠㅠ
중간에 이상한 문자가 끼어있어서 제대로 안되기도 했고.. 스크립트도 약간 문제가 있었던듯 하네요.
일단 제스타일대로 다시 정리해봤습니다. 검증했습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<style type="text/css">
body {
font-size: 12px;
color: #FFFFFF;
font-family: "굴림";
}
.layer_pop{position:fixed; width:100%; height:2000px; top:0px; left:0px; background:url('./images/dark_bg.png'); display:none;}
.layer_pop .pop_cont{position:absolute;}
.btn_close{display:block; font-weight:bold; color:#FFFFFF; padding:3px; text-align:right;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".btn_open").on('click',function(){
var target = $(this).data('target');
if(target==undefined) return false;
$(target).show();
var tx = ($(window).width()-$(target+" .pop_cont").width())/2;
var ty = ($(window).height()-$(target+" .pop_cont").height())/2;
$(target+" .pop_cont").css({left:tx+"px",top:ty+"px"});
$("body").css("overflow","auto");
return false;
})
$(".btn_close").on('click',function(){
var $target = $(this).closest('.layer_pop');
$target.hide();
$("body").css("overflow","auto");
return false;
});
});
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="60"></td>
</tr>
<tr>
<td>
<a href="#" class="btn_open" data-target="#layer_pop1">
레이어팝업1
</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="btn_open" data-target="#layer_pop2">
레이어팝업2
</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="btn_open" data-target="#layer_pop3">
레이어팝업3
</a>
</td>
</tr>
</table>
<div id="layer_pop1" class="layer_pop">
<div class="pop_cont">
팝업된 레이어1
<button type="button" class="btn_close">닫기</button>
</div>
</div>
<div id="layer_pop2" class="layer_pop">
<div class="pop_cont">
팝업된 레이어2
<button type="button" class="btn_close">닫기</button>
</div>
</div>
<div id="layer_pop3" class="layer_pop">
<div class="pop_cont">
팝업된 레이어3
<button type="button" class="btn_close">닫기</button>
</div>
</div>
</body>
</html>
