javascript - 无法让图像正确覆盖

Question

我有一个图像，只有当位于 pagegridview 中的图标被选中时才会出现。 应该发生的是叠加层显示，并在其顶部显示全尺寸图像。 真正发生的是叠加层覆盖了我的全尺寸图像并使其偏离中心。我的代码如下:

CSS

#overlay{
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    background-color: #000; 
    opacity: 0.7;
    filter: alpha(opacity = 70) !important;
    display: none;
    z-index: 100;
}
.fullView{
    position: absolute;
}

Javascript

显示效果很好，由于覆盖在顶部，无法测试隐藏。

$('.preview').click(function(){
    $("#<%=imgFull.ClientID%>").attr("src", $(this).attr('fullImg'));
    $("#overlay").show();
    $("#overlayContent").show();
});

$("#<%=imgFull.ClientID%>").click(function(){
    $("#<%=imgFull.ClientID%>").attr("src", "");
    $("#overlay").hide();
    $("#overlayContent").hide();
});

覆盖/完整图像 Div

位于 ASP 面板和 PageGridView 的正下方

<!-- Divs for displaying the full sized image. Initially hidden. Hides again when clicked -->

<div id="overlay"></div>
    <div id="overlayContent" >
        <asp:Image runat="server" ID="imgFull" Width="400" ImageUrl="" CssClass="fullView"/>
    </div>

我可以发誓大部分 position:absolute css 会解决主要部分，但时间紧迫，我正在尝试用流感来解决这个问题。感谢您的帮助。

Answer 1

答案就在我眼前，我只是没有完全意识到。 #overlay# CSS 很好，但是，我还需要将 .fullView 更改为 fixed`。完成此操作后，图像完美地悬停在叠加层之上，我能够利用 javascript 中的一些 CSS 更改使图像准确居中。