Javascript 如何使弹出窗口工作

我试图开发一个弹出功能，当你点击一个图像时，图像会弹出。这是一个例子

单击第一个图像并将其关闭。然后单击第二个图像。图像在重复。你知道我做错了什么吗？由于某些原因，我无法在此发布代码

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

<!-- 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>

<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>

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

HTML:

$('.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();
});

<!-- 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>

<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>

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

您有：

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

您将图像附加到

projectContainer

，而没有首先清除

projectContainer

（因此每次图像都会继续累积）。因此，您需要做的是清除以前的图像，然后插入新图像

但是在

projectContainer

中有一个关闭按钮，这让事情变得有点棘手。有很多方法可以解决这个问题，但一个简单的解决方案是在

projectContainer

内部引入另一个

，

imageContainer

：

HTML:

$('.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();
});

<!-- 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>

<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>

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

---

这样的东西应该有用。

为什么不使用灯箱？@Jace——这是你第二次解决我的问题：-）你是man@soum哦，真的！克隆部门的问题：）很乐意帮忙。