CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dan
Dan

Reputation: 13

Full screen div after clicking image

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")
});
});

Upvotes: 1

Views: 6797

Answers (3)

Super User
Super User

Reputation: 9642

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>

Upvotes: 2

Tibs
Tibs

Reputation: 765

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.

Upvotes: 0

Mikkel Fennefoss
Mikkel Fennefoss

Reputation: 909

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.

Upvotes: 0

Related Questions