单击图像后全屏div

Question

Can I make a div appear at full screen after clicking a image? maybe with a nice fold open animation. I tried this without the animation:

HTML image:

<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

You need to set .css("display","block") in your JS, when you click the element, and if you wanna have it filling up the entire width and height of the window, you could look into using width: 100vw; and height: 100vh; as this will take up the entire space available.

Answer 2

You need to replace unset to block , and add preventDefault() on click function.

Check updated snippet below..

 $(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

If you want a simple animation. Use jquery's fadeIn() method.

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

You have to set your #hidden div's height and width to 100% and give it a fixed position.