Javascript/jQuery Popup Event

1. 모달팝업

  var memo = ['이미지 내용1','이미지 내용2','이미지 내용3','이미지 내용4'];  
 
  $('클릭할 a태그').click(function(e){
      e.preventDefault();

      var ind = $(this).index('클릭할 a태그');  // 이미지 갯수 번호 뽑아내기

      $('a태그 클릭시 뒷배경을 반투명하게 가려줄 태그').fadeIn('fast');
      $('a태그 클릭시 뜨는 팝업창 태그').fadeIn('slow');

      $('이미지').attr('src','바꿔줄 이미지 경로'+(ind+1)+'.jpg');
      $('이미지 설명').text(memo[ind]);

  });

  $('선택자').click(function(e){
      e.preventDefault();
      $('a태그 클릭시 뒷배경').hide();
      $('a태그 클릭시 팝업창').hide();
  });

버튼 클릭시 뒷배경과 실제 팝업창의 position을 fixed로 고정

뒷배경을 width,height 값을 100%로 꽉차게 잡아준다

팝업창 센터공식 ( left:50%; margin-left : -(전체크기/2) )

팝업창 z-index 설정시 뒷배경보다 높게 ( 크기 설정시 % 단위 권장 )

마크업 길이 줄이기 위해 배열/객체배열 사용

 

2. 객체배열을 사용한 모달팝업

  var memo = [
        {각각 txt 변수에 들어갈 변수들},
        {각각 txt 변수에 들어갈 변수들},
        {각각 txt 변수에 들어갈 변수들},
        {각각 txt 변수에 들어갈 변수들}
      ];
    
 
  $('클릭할 태그').click(function(e){
      e.preventDefault();
      var txt =''; // 태그와 객체배열을 담을 변수
      var ind = $(this).index('클릭할 태그');  // 인덱스 번호 빼기

      $('배경태그').fadeIn('fast');
      $('팝업태그').fadeIn('slow');

      $('팝업안에 이미지').attr('src','이미지경로'+(ind+1)+'.jpg');
      
      txt+= 추가할 태그 + memo[ind].배열안에변수;
      txt+= 추가할 태그;
      txt+= 추가할 태그;
      txt+= 추가할 태그;
      txt+= 추가할 태그;
      txt+= 추가할 태그;
      
      $(txt변수를 넣을 태그).html(txt);

  });

  $('.close_btn,.pop .modal_box').click(function(e){
      e.preventDefault();
      $('.pop .modal_box').hide();
      $('.pop .popup').hide();
  });

객체배열안에 text 내용을 넣어주어 수정이 용이하고 확작성이 좋다