显示覆盖全屏 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>

Answer 2

这将打开或关闭全屏

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

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

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

尝试用这个替换你的 jQuery 代码

$(function(){

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

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

        });

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

            $(this).hide();

        });



    });