Show overlay fullscreen div then hide it by clicking on it

Question

I'm new to the html/css/jquery languages, so please pardon me if my question seems too obvious.

My aim is to make a fullscreen overlay div appear when clicking on a div (this step actually worked with the toggle function) and then make this same div disappear by just clicking on it.

I've browsed many related topics but I can't seem to find a way to resolve my issue. How can I make the full screen div disappear by clicking anywhere on it (clicking back on the first div is not an option since it's intentionally hidden)?

Here's my code so far:

JavaScript (jQuery):

$(function() {
    $("#bandeau").click(function() {
        $("#full_screen").toggle();
    }); 
});

HTML:

<div id="bandeau">content</div>

<div id="full_screen">
    <div class="info_visible" id="about">content</div>
</div>

CSS:

#bandeau {
    background-color: black;
    overflow: hidden;
    cursor: crosshair;
    width: 100%;
    height: 57px;
    z-index: 1000;
    position: fixed;
}

#full_screen {
    background-color: black;
    overflow: hidden;
    cursor: crosshair;
    width: 100%;
    height: 100%;
    z-index: 1000;
    position: fixed;
    display: none;
    margin: 0px;
    padding: 0px;
}

.info_visible {
    width: 100%;
    height: auto;
    color: white;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 30px;
    position: fixed;
}

L777 · Answer 1 · 2016-03-09T18:27:01.430

Pure CSS solution with undercover checkbox:

html {
  width: 100%;
  height: 100%;  
  background: lavender;
  text-align: center;
  font-family: arial, sans-serif;
}

input { 
  display: none;
}

#target { 
  display: none;
}

#click:checked ~ label > #target {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  height: 100%;
  width: 100%;
  background: url('http://i.imgur.com/bv80Nb7.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.item {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  cursor: pointer;  
  user-select: none;
  -webkit-user-select: none;  
}

#warning {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
}

<input type="checkbox" id="click" name="click" value="click" />

<label for="click">
<p class="item"><b>CLICK HERE</b></p>
<div id=target><h1 id=warning>FULLSCREEN CONTENT</h1></div>  
</label>

score 0 · Accepted Answer · answered Mar 09 '16 at 16:51

0

This will toggle full screen on or off

https://jsfiddle.net/42atLz1g/1/

$("#bandeau, #full_screen").click(function(){
    $("#full_screen").toggle();
});

answered Mar 09 '16 at 16:51

DevStacker

675
10
23

score 0 · Answer 3 · edited May 23 '17 at 12:31

Below is a simple and easy way to do it with one command and full explination. Enjoy and welcome to website development!

Note: scroll to end of answer to see a short list of helpful links

//  this is simply jQuery shorthand for document.ready = function ...
$(function(){
    //  this is how to dynamically assign events
    //  why is this important? let's say, in the future,
    //  you decide to add elements after the page is loaded,
    //  this allows the NEW elements to still use the same events you've assigned
    $(document)
        //  .on and .off are as simple as they appear, 
        //  on adds an event to a group of elements and off removes
        //  as you'll notice, I assign just one method to both elements
        //  the reason is this move is extremely simple
        //  all you need is to have one element hide or show, based on 
        //  clicking one of the divs
        .on('click', '#bandeau, #full_screen', function(e) {
            //  .toggle accepts a booleen argument
            //  if true = show, if false = hide
            //  thus i simply test the id name within the parameter!
            $('#full_screen').toggle(this.id == 'bandeau');
         })
});

#bandeau{
    background-color: black;
    color: green;
    overflow: hidden;
    cursor: crosshair;
    width:100%;
    height: 57px;
    z-index: 1000;
    position: fixed;
}

#full_screen {
    background-color: black;
    overflow: hidden;
    cursor: crosshair;
    width: 100%;
    height: 100%;
    z-index: 1000;
    position: fixed;
    display: none;
    margin: 0px;
    padding: 0px;
}

.info_visible {
    width:100%;
    height: auto;
    color:white;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 30px;
    position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bandeau">content</div>
<div id="full_screen">
    <div class="info_visible" id="about">tnetnoc</div>
</div>

See more about jQuery Dynamic Events here (.on) && here (.off)
More you should read about dynamic entry
.toggle()

@soph.a don't know if you saw, but i just updated it with more information — SpYk3HH, Mar 09 '16 at 17:13

score -1 · Answer 4 · answered Mar 09 '16 at 16:49

-1

Try to replace your jQuery code with this

$(function(){

        $("#bandeau").click(function(){

            $("#full_screen").show();

        });

        $("#full_screen").click(function(){

            $(this).hide();

        });



    });

answered Mar 09 '16 at 16:49

Marko Francekovic

1,450
10
10

Show overlay fullscreen div then hide it by clicking on it

4 Answers4