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而不先清除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());

这样的效果应该有效。

如何使弹出窗口工作

1 个答案: