팝업 작업을 만드는 방법

Question

이미지를 클릭하면 이미지가 팝업으로 열리는 팝업 기능을 개발하려고합니다. 여기에 예제가 있습니다 http://soumghosh.com/otherProjects/natalierosscms/175-2/

첫 번째 이미지를 클릭하고 닫습니다. 그런 다음 두 번째 이미지를 클릭하십시오. 이미지가 반복됩니다. 내가 뭘 잘못하고 있는거야? 웬일인지 여기에 코드를 게시 할 수 없습니다.

자바 스크립트 :

$('.alignnone').click(function(){ 
    $('.overlay').appendTo('body'); 
    $('.overlay').show(); 

    var popImage = $('.projectContainer').show(); 
    var thumbHolder = $(this).parent(); 
    thumbHolder.css('position', 'relative'); 

    $(this).clone().appendTo('.projectContainer'); 
    var cssAtrOne = { 
     padding:'10px', 
     width:'110%' 
    }; 
    popImage.appendTo(thumbHolder).css(cssAtrOne); 
}); 

$('.closeButton').click(function(){ 
    $('.overlay').hide(); 
    $('.projectContainer').hide(); 
}); 

HTML :

<!-- clickable image --> 
<img src="http://soumghosh.com/otherProjects/natalierosscms/wp-content/uploads/2013/03/T1Main.jpg" alt="T1Main" width="559" height="745" class="alignnone size-full wp-image-181"> 

<!-- popup --> 
<div class="projectContainer" style="padding: 10px; width: 110%; display: block;"> 
    <img class="closeButton" src="/otherProjects/natalierosscms/wp-content/themes/twentyeleven/images/closeButton.png"> 
</div> 

Answer 1

당신이이 :

$(this).clone().appendTo('.projectContainer'); 

당신은 클레아없이 projectContainer에 이미지를 추가하고 먼저 projectContainer에 전화를 겁니다 (그래서 이미지가 매번 계속 축적됩니다). 따라서 이전 이미지를 지우고 새 이미지를 삽입해야합니다.

내부는 projectContainer입니다.이 버튼은 닫기 버튼이므로 조금 사기성이 있습니다. 이이 문제를 해결하는 방법에는 여러 가지가 있지만 직선 앞으로 솔루션은 imageContainerprojectContainer 내부에 또 다른 <div>을 소개하는 것입니다 :

HTML :

<div class="projectContainer" style="display: none; padding: 10px; width: 110%;"> 
    <img class="closeButton" src="/otherProjects/natalierosscms/wp-content/themes/twentyeleven/images/closeButton.png"> 
    <div class="imageContainer"></div> 
</div> 

다음 수정하여 JS :

변경 JS :

//REPLACE the contents of imageContainer, not append to it. 
//$(this).clone().appendTo('.projectContainer'); 
$('.projectContainer > .imageContainer').html($(this).clone()); 

그 효과가 있어야합니다.