자바스크립트 레이어 팝업에 대해서 질문드립니다.
조회수 1498회
여러 개의 div에 각기 다른 레이어 팝업을 적용했는데, 어떤 div를 눌러도 단 하나의 레이어 팝업만이 뜹니다..
레이어 팝업을 만드는 기본 틀은 이러하구요,
function wrapWindowByMask(){ var maskHeight = $(document).height(); var maskWidth = $(window).width();
$('#mask01').css({'width':maskWidth,'height':maskHeight});
$('#mask01').fadeTo("fast",0.8);
var left = ( $(window).scrollLeft() + ( $(window).width() - $('#window01').width()) / 2 );
var top = ( $(window).scrollTop() + ( $(window).height() - $('#window01').height()) / 2 );
$('#window01').css({'left':left,'top':top, 'position':'absolute'});
$('#window01').show();$("body").css("overflow","hidden");$("#window01").css("overflow","auto");$('#artwork01').css({'width':1400,'height':auto});
$("#artwork01").css("overflow","auto");$('#info').css({'float':right});
}
$(document).ready(function(){
$('#work001').click(function(e){
e.preventDefault();
wrapWindowByMask();
});
$('.window .close').click(function (e) {
e.preventDefault();
$('#mask01, #window01').hide(); $("body").css("overflow","auto");
});
$('#mask01').click(function () {
$(this).hide();
$('#mask01, #window01').hide(); $("body").css("overflow","auto");
});
});
이 코드를 똑같이 6개를 복제하여 안의 내용을 각기 다르게 수정하였는데, 어떤 div를 클릭해도 로드되는 팝업은 단 한가지 버전이더군요.... 어떤 문제가 있을까요?? ㅠㅠㅠ
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
1 답변
-
- 복사한 다음에 변수값을 적절히 바꿔 주셨는지 확인해 주세요.
#window02
,#window03
등등의 객체가 실제로 존재하나요?wrapWindowByMask()
함수가 여러 다른 종류의 팝업을 제어할 수 있나요? - 복사 붙여넣기를 하는 대신, 뭔가 내용을 넣으면 팝업으로 띄워 주는 함수를 작성해서 (재)사용하시는 게 어떨까요?
// 테스트해 본 적 없는 코드입니다. 'info'가 뭔지는 모르겠어서 무시합니다. // 모달 닫는 루틴은 생략 var openModal = function (title, bodyHTML) { // 먼저 modal에 내용을 채워서 가로세로를 갖게 함 if (typeof title == 'undefined' || typeof bodyHTML == 'undefined') return false; $('#modal #title').text(title); $('#modal #body').html(bodyHTML); // mask를 띄움 var maskHeight = $(document).height(); var maskWidth = $(window).width(); $("body").css("overflow","hidden"); $('#mask').css({ 'width': maskWidth, 'height': maskHeight }).fadeTo("fast", 0.8); // modal이 적절한 가로세로를 갖고 있으므로 모달을 띄움 // todo: 모달(팝업)의 가로/세로가 창의 가로/세로보다 클 경우의 처리. 닫기버튼이 가려서 안 보이는 등의 부작용 가능. var modalLeft = ($(window).scrollLeft() + ($(window).width() - $('#modal').width()) / 2); var modalTop = ($(window).scrollTop() + ($(window).height() - $('#modal').height()) / 2); $('#modal').css({ 'left': modalLeft, 'top': modalTop, 'overflow': 'auto' }).show(); } // 이제 이 블럭 하나로 #work001.work, #work002.work ... 등을 다룰 수 있음 $('.work').each(function(){ $(this).click(function(){ var title = $(this).find('.hidden .title').text(); var body = $(this).find('.hidden .body').html(); openModal(title, body); }); });
- 복사한 다음에 변수값을 적절히 바꿔 주셨는지 확인해 주세요.
댓글 입력