如何使弹出工作

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

这种情况应该起作用。