Question

我尝试使用一些jQuery制作简单的图库。

当用户点击图像时，它将显示图像而不直接显示图像链接。

问题是，当我点击它时，我得到完整的覆盖屏幕但是当我点击第三张和第四张图片时，它不会给出全屏覆盖。

您可以在此处试用我的代码。

//Jquery Object
var $overlay = $('<div id="overlay"></div>');

var $image = $('<img>');

var $caption =$('<p></p>');



$overlay.append($image);

$overlay.append($caption);

$('body').append($overlay);

//1 Click image 

    $('.container ul li a').click(function(event){
    //1.1 Stop prevent default
    event.preventDefault();

    //2.1 SHow image

    $imageLocation = $(this).attr('href');
    console.log($imageLocation);

    $image.attr('src',$imageLocation);

    //2.2 Show caption (use alt)

    $getCaption = $(this).children('img').attr('alt');

    $caption.text($getCaption);
    //2 Show Overlay

    $overlay.fadeIn('slow');




    });

//3 Click image again
    //3.1 hide overlay
    ($overlay).click(function(){

        $overlay.fadeOut('slow');
    })

感谢。

Answer 1

从此类中删除top属性：

.container {
padding: 0;
margin: 0;
/* height: 800px; */
max-width: 60%;
border: 9px solid white;
border-radius: 10px;
list-style: none;
display: block;
margin: 0 auto;
position: relative;
/* top: 70px; */
}

Answer 2

如果我了解您要执行的操作，我会将重叠式position更改为fixed：

#overlay{
  background: rgba(0,0,0,0.7);
  height: 100%;
  width: 100%;
  position: fixed; 
  top:0;
  left: 0;
  display: none;
}

Answer 3

添加css位置：相对到body标签（Inside IFrame）

如何使这个叠加全高？

3 个答案: