jquery - 克隆的图像更改固定的 div 位置

Question

当用户单击轮播中的图像时，我正在创建一个弹出式放大图像。我已经做到了这一点，但图像位置会根据其在轮播中的位置而有所不同。我现在拥有的 CSS 是:

#carousel1{
    width:1000px;
    height:200px;
    overflow:scroll;
}
#popUp{ 
    display: none;
    position: fixed !important;
    width: 580px !important;
    height: 350px !important;
    z-index: 9999;
}

相关的 HTML 是:

<div id = "carousel1">
    <img class="cloudcarousel" src="1.png" alt="1" title="Flag 1 Title" />
    <img class="cloudcarousel" src="2.png" alt="2" title="Flag 2 Title" />
    <img class="cloudcarousel" src="3.png" alt="3" title="Flag 3 Title" />
    <img class="cloudcarousel" src="4.png" alt="4" title="Flag 4 Title" />
    <img class="cloudcarousel" src="5.png" alt="5" title="Flag 5 Title" />
</div>
<div id = "popUp"></div>

相关的 jQuery 是:

this.imagePop = function () {
    if (options.imagePop !== 'no') {

        $(container).bind('click', this, function (event) {

            clearInterval(event.data.autoRotateTimer); // Stop auto rotation if mouse over.
            clearInterval(event.data.intervalLeft);
            clearInterval(event.data.intervalRight);
            var text = $(event.target).attr('alt');
            // If we have moved over a carousel item, then show the alt and title text.

            var $img = $(event.target);
            $('#popUp').html($img.clone().height(200).width(300)).add($('#overLay')).fadeIn();
            $('#popUp').add($('#overLay')).click(function () {
                $('#popUp').add($('#overLay')).fadeOut(function () {
                    $('#popUp').empty();
                });
            });
        });
    };
};

有关该问题的工作示例，请参阅:www.bingetech.com/carousel

是否可以使用克隆图像将 popUp div 居中放置在屏幕中间？

Answer 1

我认为这与 .clone() 方法有关。您可以确保只设置弹出图像属性，因为克隆图像将导致与克隆目标接触相同的值。

#popUp img {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -175px;
  margin-left: -290px;
}

注意:确保它在 css 中的 .cloudcarousel 类下面声明