如何使彈出工作

Question

我想開發一個彈出功能，當你點擊一個圖像時，圖像打開爲彈出。下面是示例 http://soumghosh.com/otherProjects/natalierosscms/175-2/

單擊第一個圖像並關閉它。然後點擊第二張圖片。圖像重複。任何想法我做錯了什麼？出於某種原因，我無法在此發佈代碼。

的JavaScript：

$('.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沒有CLEA首先響起projectContainer（所以圖像每次都會持續增加）。所以你需要做的是清除以前的圖像，然後插入新的圖像。

但是裏面的projectContainer是你的關閉按鈕，這使得事情有點小事。有很多方法可以解決這個問題，但一個直接的解決辦法是引入另一個<div>，imageContainer內projectContainer：

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()); 

這種情況應該起作用。