點擊外面時關閉彈出菜單

我有以下代碼點擊外面時關閉彈出菜單

<!DOCTYPE html> 
<html> 
<head> 
    <title>GalacticCraft</title> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <link rel="shortcut icon" type="image/png" href="favicon.ico"> 
</head> 
<body> 
<div id="staff"></div> 
    <div id="portal"> 
     <img id="logo" src="assets/logo.png"> 
     <div id="buttons"> 
      <a href="http://forums.galacticmc.net"><div class="button" id="button1"></div></a><a href="http://store.galacticmc.net"><div class="button" id="button2"></div></a><a href="http://galacticmc.net/rules"><div class="button" id="button3"></div></a><div class="button" id="button4" onclick="staff()"></div><a href="http://galacticmc.net/vote"><div class="button" id="button5"></div></a> 
     </div> 
    </div> 
</body> 
</html> 
<script> 
function staff() { 
    document.getElementById('staff').innerHTML = ` 
<div class="popup" onclick="close()"></div><img src="assets/close.png" class="close-icon" onclick="close()"><div class="popup-menu"><a href="http://www.galacticmc.net/staff-application"><img src="assets/apply.png" class="apply"><p>Apply to become a member of staff</p></a><hr><a href="http://galacticmc.net/staff"><img src="assets/staff.png" class="list-staff"><p>View Staff Members</p></a></div> 
    ` 
} 

</script>

和CSS

.popup { 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #000; 
    position: absolute; 
    z-index: 5; 
    opacity: 0.5 
} 
.popup-menu { 
    top: 0; 
    width: 700px; 
    height: 99.6%; 
    background-color: #fff; 
    position: absolute; 
    z-index: 10; 
    left:calc(50% - 351px); 
    border: 2px solid #808080; 
     -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */ 
     -moz-animation: fadein 1s; /* Firefox < 16 */ 
     -ms-animation: fadein 1s; /* Internet Explorer */ 
     -o-animation: fadein 1s; /* Opera < 12.1 */ 
      animation: fadein 1s; 
    padding-left: 20px; 
} 
.apply { 
    width: 350px; 
    height: 350px; 
    position: relative; 
    left: calc(50% - 185px); 
} 
.popup-menu p { 
    color: #009AFF; 
    text-align: center; 
    font-size: 35px; 
} 
.popup-menu a { 
    text-decoration: none 
} 
.list-staff { 
    width: 350px; 
    height: 350px; 
    position: relative; 
    left: calc(50% - 185px); 
} 
.close { 
    position: absolute; 
    top: 2px; 
    right: 2px; 
} 
html { 
    background-image: url("assets/bg.png"); 
    background-size: 100%; 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
} 
#portal { 
    bottom: 0; 
    height: 550px; 
    left: 0; 
    margin: auto; 
    position: absolute; 
    right: 0; 
    text-align: center; 
    top: 0; 
    width: 1000px; 
} 
#buttons { 
    bottom:75px; 
    height:200px; 
    position:absolute; 
    width:1000px; 
} 

.button { 
    background-position:center; 
    background-repeat:no-repeat; 
    background-size:190px; 
    cursor:pointer; 
    display:inline-block; 
    height:200px; 
    transition:background-size .2s ease; 
    width:200px; 
} 

.button:hover {background-size:200px} 
.button:active {background-size:180px} 

#button1 {background-image:url("assets/forums.png")} 

#button2 {background-image:url("assets/store.png")} 

#butt 

on3 {background-image:url("assets/rules.png")} 

#button4 {background-image:url("assets/staff.png")} 

#button5 {background-image:url("assets/vote.png")} 

@keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Firefox < 16 */ 
@-moz-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Safari, Chrome and Opera > 12.1 */ 
@-webkit-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Internet Explorer */ 
@-ms-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Opera < 12.1 */ 
@-o-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

這裏是一個的jsfiddle爲https://jsfiddle.net/vgjvzmp5/

正如你所看到的，當你點擊「點擊我」，出現一個彈出窗口。它的工作方式我很喜歡，但當點擊了褪色的背景或點擊了角落中的關閉圖標時，我該如何關閉它？我使用的是簡單的Javascript。

來源

2017-01-01 sdgsdg sdfgsg

也許[negation僞類]（http://stackoverflow.com/questions/2489674/how-to-create-a-css-rule-for-all-elements-except-one-class）可能會有所幫助。 – Andrej

下面是一個簡單的工作示例。您不需要點擊附加一堆html。你可以直接將它添加到與display:none和使用JS你的HTML顯示&隱藏：

function show() { 
    document.getElementById('popup').style.display = 'block'; 
} 

function hide() { 
    document.getElementById('popup').style.display = 'none'; 
}

https://jsfiddle.net/vgjvzmp5/3/

來源

2017-01-01 22:00:52

您應該使用stopPropagation()。

預覽可用於codepen！

來源

2017-01-01 22:15:39 JustCauseWhat

點擊外面時關閉彈出菜單

回答

相關問題