레이어 팝업 질문드립니다.. 채택완료
각 링크 클릭시 레이어로 팝업을 띄우려고 하는데요
레이어팝업 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");
}
검증은 안해봤습니다만 이런식이면 되지 않을까 합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
중간에 이상한 문자가 끼어있어서 제대로 안되기도 했고.. 스크립트도 약간 문제가 있었던듯 하네요.
일단 제스타일대로 다시 정리해봤습니다. 검증했습니다.
</p><p><!doctype html></p><p><html lang="ko"></p><p><head></p><p><meta charset="utf-8"></p><p><style type="text/css"></p><p>body {</p><p> font-size: 12px;</p><p> color: #FFFFFF;</p><p> font-family: "굴림";</p><p>}</p><p>.layer_pop{position:fixed; width:100%; height:2000px; top:0px; left:0px; background:url('./images/dark_bg.png'); display:none;}</p><p>.layer_pop .pop_cont{position:absolute;}</p><p>.btn_close{display:block; font-weight:bold; color:#FFFFFF; padding:3px; text-align:right;}</p><p> </style></p><p><script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js</a>"></script></p><p><script type="text/javascript"></p><p>$(document).ready(function() {</p><p> $(".btn_open").on('click',function(){</p><p> var target = $(this).data('target');</p><p> if(target==undefined) return false;</p><p> $(target).show();</p><p> var tx = ($(window).width()-$(target+" .pop_cont").width())/2;</p><p> var ty = ($(window).height()-$(target+" .pop_cont").height())/2;</p><p> $(target+" .pop_cont").css({left:tx+"px",top:ty+"px"});</p><p> $("body").css("overflow","auto");</p><p> return false;</p><p> })</p><p> $(".btn_close").on('click',function(){</p><p> var $target = $(this).closest('.layer_pop');</p><p> $target.hide();</p><p> $("body").css("overflow","auto");</p><p> return false;</p><p> });</p><p>});</p><p></script></p><p></head></p><p><body></p><p><table cellspacing="0" cellpadding="0" align="center"></p><p> <tr></p><p> <td height="60"></td></p><p> </tr></p><p> <tr></p><p> <td></p><p> <a href="#" class="btn_open" data-target="#layer_pop1"></p><p> 레이어팝업1</p><p> </a></p><p> </td></p><p> </tr></p><p> <tr></p><p> <td></p><p> <a href="#" class="btn_open" data-target="#layer_pop2"></p><p> 레이어팝업2</p><p> </a></p><p> </td></p><p> </tr></p><p> <tr></p><p> <td></p><p> <a href="#" class="btn_open" data-target="#layer_pop3"></p><p> 레이어팝업3</p><p> </a></p><p> </td></p><p> </tr></p><p></table></p><p> <div id="layer_pop1" class="layer_pop"></p><p> <div class="pop_cont"></p><p> 팝업된 레이어1</p><p> <button type="button" class="btn_close">닫기</button></p><p> </div> </p><p> </div></p><p> <div id="layer_pop2" class="layer_pop"></p><p> <div class="pop_cont"></p><p> 팝업된 레이어2</p><p> <button type="button" class="btn_close">닫기</button></p><p> </div> </p><p> </div></p><p> <div id="layer_pop3" class="layer_pop"></p><p> <div class="pop_cont"></p><p> 팝업된 레이어3</p><p> <button type="button" class="btn_close">닫기</button></p><p> </div> </p><p> </div></p><p></body></p><p></html></p><p>댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인