javascript - 点击图片后全屏div

Question

点击图片后可以让div全屏显示吗？也许有一个漂亮的折叠打开动画。我在没有动画的情况下尝试了这个:

HTML 图像:

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

HTML 分区:

<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

您需要将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>