Question

我有以下代码

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

这是https://jsfiddle.net/vgjvzmp5/

的JSFiddle

如您所见，当您点击＆＃34;点击我＆＃34;时，会出现一个弹出窗口。它是如何工作的，但是当点击褪色的背景或点击角落里的关闭图标时，我该如何关闭它呢？我使用普通的Javascript。

Answer 1

这是一个简单的工作示例。你不需要在点击时附加一堆html。您可以使用display:none将其直接添加到您的html中，然后使用js来显示＆amp;隐藏：

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

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

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

Answer 2

您应该使用stopPropagation()。

预览codepen中的可用内容！

单击外部时关闭弹出菜单

2 个答案: