Question

我在列表中有视频图标，我在其中添加了一些div作为弹出窗口，我在点击这些图标时切换。我希望最新的div弹出窗口能够出现在之前显示的其他div之上。我使用的jquery是：

 $('.icon_videonew').each(function () {
       // alert('each');
        $(this).append('<div class="cam-poppupp" style="background: #ff0">something</div>');
        $(this).click(function () {
            $(this).children('.cam-poppupp').fadeToggle(80);
        });
    });

我希望最新的div弹出窗口具有比以前的弹出窗口更多的z-index值，因此前一个弹出窗口（曾经是最新的）的z-index值将返回到更少的z-index值。请提出一些代码

这里是小提琴： https://jsfiddle.net/7b2hz5gw/

感谢。

Answer 1

只需增加一个z-index值：

var zIndex = 1;
$('.icon_videonew').each(function () {
   // alert('each');
    $(this).append('<div class="cam-poppupp" style="background: #ff0; z-index: ' + zIndex++ + ';">something</div>');
    $(this).click(function () {
        $(this).children('.cam-poppupp').fadeToggle(80);
    });
});

首先添加div将获得z-index 1，接下来是2，依此类推。

Answer 2

这可以解决您的问题：

  $(this).append('<div class="cam-poppupp" style="background: #ff0">something</div>');
        $(this).click(function () {

           //Reduce the z-index of all prev popups
            $('.cam-poppupp').css('zIndex', 99);           
            $(this).children('.cam-poppupp').css('zIndex', 100).fadeToggle(80);
        });

我首先缩小所有其他弹出窗口的z-Index，然后将新弹出窗口的z-Index设置为100。

更新后的小提琴：https://jsfiddle.net/7b2hz5gw/1/

选择最新单击列表以具有特定属性

2 个答案: