팝업 가동하려는데 코드 요약할 수 있게 도와주세요ㅠ
본문
레이어팝업 가동하려하는데 일단 구동은 잘 되고 있습니다! 그런데 추후에 항목이 늘어난다거나 그럴때 계속 소스 삽입을 해야하는 노가다 코드라서 함축하는 방법 부탁드립니다!!
<script type="text/javascript">
$(document).ready(function(){
$(".layerPopup").hide();
function wrapWindowByMask(){
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//var i = $(this).index(); <-이걸 잘 활용하면 될거같은데 방법을 모르겠습니다!
$(".mask").css({width:maskWidth,height:maskHeight});
$(".mask").fadeIn(0);
$(".mask").fadeTo("normal",0.65);
$(".layerPopup").show();
//$(".layerPopup .wrapPopup").eq(i).show();
}
//열때
$(".map_list ul li a, .guide_map a").click(function(){
//console.log($(this).index()+1)
$('html, body').css({'overflow': 'hidden', 'height': '100%'});
$(this).on('scroll touchmove mousewheel', function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
});
$(".guide_map .gm01, .map_list ul li .num1").click(function(){ <-각 넘버 클릭마다
$(".layerPopup .pop00").show(); <-해당 숫자에 맞는 팝업창을 띄우려 합니다!
wrapWindowByMask();
})
$(".guide_map .gm02, .map_list ul li .num2").click(function(){
$(".layerPopup .pop01").show();
wrapWindowByMask();
})
$(".guide_map .gm03, .map_list ul li .num3").click(function(){
$(".layerPopup .pop02").show();
wrapWindowByMask();
})
$(".guide_map .gm04, .map_list ul li .num4").click(function(){
$(".layerPopup .pop03").show();
wrapWindowByMask();
})
$(".guide_map .gm05, .map_list ul li .num5").click(function(){
$(".layerPopup .pop04").show();
wrapWindowByMask();
})
$(".guide_map .gm06, .map_list ul li .num6").click(function(){
$(".layerPopup .pop05").show();
wrapWindowByMask();
})
$(".guide_map .gm07, .map_list ul li .num7").click(function(){
$(".layerPopup .pop06").show();
wrapWindowByMask();
})
$(".guide_map .gm08, .map_list ul li .num8").click(function(){
$(".layerPopup .pop07").show();
wrapWindowByMask();
})
$(".guide_map .gm09, .map_list ul li .num9").click(function(){
$(".layerPopup .pop08").show();
wrapWindowByMask();
})
$(".guide_map .gm10, .map_list ul li .num10").click(function(){
$(".layerPopup .pop09").show();
wrapWindowByMask();
})
$(".guide_map .gm11, .map_list ul li .num11").click(function(){
$(".layerPopup .pop10").show();
wrapWindowByMask();
})
$(".guide_map .gm12, .map_list ul li .num12").click(function(){
$(".layerPopup .pop11").show();
wrapWindowByMask();
})
$(".guide_map .gm13, .map_list ul li .num13").click(function(){
$(".layerPopup .pop12").show();
wrapWindowByMask();
})
//닫을때
$(".popbtn .close").click(function (e) {
e.preventDefault();
$('html, body').css({'overflow': 'auto', 'height': '100%'});
$(".le_map .map_list ul li a, .le_map .map_img .guide_map a").off('scroll touchmove mousewheel');
$(".mask, .layerPopup").hide();
$(".layerPopup .wrapPopup").hide();
});
$(".mask").click(function () {
$('html, body').css({'overflow': 'auto', 'height': '100%'});
$(".le_map .map_list ul li a, .le_map .map_img .guide_map a").off('scroll touchmove mousewheel');
$(this).hide();
$(".layerPopup").hide();
$(".layerPopup .wrapPopup").hide();
});
});
</script>
답변 1
넘버링을 모두 동일하게 1~13 으로 맞추면 됩니다.
for(i=1; i<=13; i++) {
$(".guide_map .gm"+i+", .map_list ul li .num"+i).click(function(){
$(".layerPopup .pop"+i).show();
wrapWindowByMask();
})
}
답변을 작성하시기 전에 로그인 해주세요.
