点击图片

Question

单击图像后，我可以在全屏显示div吗？也许有一个很好的折叠打开动画。我试了这个没有动画：

HTML图片：

<span class="image fit"><a href="#" target="_blank"><img src="images/image.png" alt="image" /></a></span>

HTML Div：

<div id="hidden">

</div>

CSS：

#hidden {
    z-index:9999;
    display:none;
    background-color:#fff;
    position:fixed;
    height:100%;
    width:auto;
}

JS：

$(document).ready(function() {
$( 'a' ).click( function() {
    $("#hidden").css("display","unset")
});
});

Answer 1

你需要在JS中设置.css("display","block")，当你点击元素时，如果你想让它填满窗口的整个宽度和高度，你可以考虑使用width: 100vw;和height: 100vh;因为这会占用整个可用空间。

Answer 2

您需要将unset替换为block，并在点击功能上添加preventDefault()。

检查以下更新的代码段。

$(document).ready(function() {
  $('a').click( function(e) {
      e.preventDefault();
      $("#hidden").show();
  });
  $('.close').click(function(){
      $("#hidden").hide();
  })
});

#hidden {
    z-index:9999;
    display:none;
    background-color:#fff;
    position:fixed;
    height:100%;
    width:100%;
    left: 0px;
    top: 0px;    
    text-align: center;
}
.close {
    position: absolute;
    right: 0px;
    top: 0px;
    background: #000;
    color: #fff;
    cursor: pointer;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="image fit"><a href="#" target="_blank"><img src="images/image.png" alt="image" /></a></span>

<div id="hidden">
Full Screen Div
<div class="close">X</div>
</div>

Answer 3

如果你想要一个简单的动画。使用jquery的fadeIn（）方法。

$(document).ready(function({
    $( 'a' ).click( function() { 
       $("#hidden").fadeIn();
    }); 
});

你必须将你的#hidden div的高度和宽度设置为100％并给它一个固定的位置。