顯示疊加全屏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

這將打開或關閉全屏顯示

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

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

Answer 2

下面是一個簡單易用的方法，只需一個命令即可實現。 享受並歡迎您進行網站開發！

注意： 滾動至答案末尾以查看有用鏈接的簡短列表

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

• 在此處（.on）和 ＆ 在 此處（.off）了解有關jQuery動態事件的更多信息
• 您應該閱讀有關動態輸入的更多信息
• .toggle（）

Answer 3

具有卧底復選框的純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 4

嘗試以此替換您的jQuery代碼

$(function(){

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

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

        });

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

            $(this).hide();

        });



    });