자바스크립트 레이어 팝업에 대해서 질문드립니다.

조회수 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 답변

    1. 복사한 다음에 변수값을 적절히 바꿔 주셨는지 확인해 주세요. #window02, #window03 등등의 객체가 실제로 존재하나요? wrapWindowByMask() 함수가 여러 다른 종류의 팝업을 제어할 수 있나요?
    2. 복사 붙여넣기를 하는 대신, 뭔가 내용을 넣으면 팝업으로 띄워 주는 함수를 작성해서 (재)사용하시는 게 어떨까요?
    // 테스트해 본 적 없는 코드입니다. '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);
      });
    });
    

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)