Показать оверлейный полноэкранный div, затем скрыть его, нажав на него

Question

Я новичок в языках html/css/jquery, поэтому, пожалуйста, простите меня, если мой вопрос кажется слишком очевидным.

Моя цель - создать полноэкранный оверлейный div при нажатии на div (этот шаг фактически работал с функцией переключения), а затем сделать этот же div исчезнуть, просто щелкнув по нему.

Я просмотрел много связанных тем, но я не могу найти способ решить мою проблему. Как я могу заставить полный экран исчезнуть, щелкнув в любом месте на нем (щелчок по первому div не является вариантом, поскольку он намеренно скрыт)?

Вот мой код до сих пор:

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

Answer 1

Это будет переключаться на полный экран или отключить

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

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

Answer 2

Попробуйте заменить код JQuery с этим

$(function(){ 

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

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

     }); 

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

      $(this).hide(); 

     }); 



    }); 

Answer 3

Ниже приведен простой и легкий способ сделать это с одной командой и полным объяснением. Наслаждайтесь и добро пожаловать на разработку сайта!

Примечание:прокрутки до конца ответа, чтобы увидеть краткий список полезных ссылок

// 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>

• Подробнее о JQuery динамических событий here (.on) &here (.off)
• More you should read about dynamic entry
• .toggle()

Answer 4

Pure решение CSS с тайным флажком:

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>