javascript - 显示覆盖全屏 div，然后通过单击将其隐藏

Question

我是 html/css/jquery 语言的新手，所以如果我的问题看起来太明显，请原谅我。

我的目标是在点击一个 div 时显示全屏覆盖 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

带有隐藏复选框的纯 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>