使用Vanilla Javascript关闭多个弹出消息框

时间：2019-06-04 06:27:32

标签： javascript popup

我想知道如何通过使用Pure Javascript单击关闭按钮来关闭多个弹出框。

我尝试了下面的代码，但是没有用。

JavaScript

const buttons = document.querySelectorAll('.button');
buttons.forEach((button) => {
    button.addEventListener('click', () => {
        this.parentElement.querySelector('.popup').style.display = 'none';
    });
});

HTML

<div class="popup">
    <span class="button">×</span>
    <div class="content-wrapper">
        <div class="content">
            No.1
        </div>
    </div>
</div>

<div class="popup">
    <span class="button">×</span>
    <div class="content-wrapper">
        <div class="content">
            No.2
        </div>
    </div>
</div>

<div class="popup">
    <span class="button">×</span>
    <div class="content-wrapper">
        <div class="content">
            No.3
        </div>
    </div>
</div>

CSS

.popup {
    border: 3px solid gray;
}
.button {
    position: absolute;
    left: -15px;
    top: -15px;
    display: block;
    border: 1px solid #000;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
}
.content-wrapper {
    max-height: 50vh;
    overflow-y: auto;
    padding: 20px;
} 
.content {
    overflow: hidden;    
}

.popup {
    width: 300px;
    position: relative;
    position: fixed;
    right:30px;
}

.popup:nth-child(1) {
    bottom:30px;
}
.popup:nth-child(2) {
    bottom:130px;
}
.popup:nth-child(3) {
    bottom:230px;
}

2 个答案:

答案 0 :(得分：1)

尝试一下

<!DOCTYPE html>
<html>
<head>
<style>
.popup {
    border: 3px solid gray;
}
.closePopup{
display:none;
}
.button {
    position: absolute;
    left: -15px;
    top: -15px;
    display: block;
    border: 1px solid #000;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
}
.content-wrapper {
    max-height: 50vh;
    overflow-y: auto;
    padding: 20px;
} 
.content {
    overflow: hidden;    
}

.popup {
    width: 300px;
    position: relative;
    position: fixed;
    right:30px;
}

.popup:nth-child(1) {
    bottom:30px;
}
.popup:nth-child(2) {
    bottom:130px;
}
.popup:nth-child(3) {
    bottom:230px;
}

</style>
</head>
<body>
<div class="popup">
    <span class="button">×</span>
    <div class="content-wrapper">
        <div class="content">
            No.1
        </div>
    </div>
</div>

<div class="popup">
    <span class="button">×</span>
    <div class="content-wrapper">
        <div class="content">
            No.2
        </div>
    </div>
</div>

<div class="popup">
    <span class="button">×</span>
    <div class="content-wrapper">
        <div class="content">
            No.3
        </div>
    </div>
</div>
<script>
const buttons = document.querySelectorAll('.button');
const popups = document.querySelectorAll('.popup');
buttons.forEach(function(button,index){console.log('index:',index);
  let newIndex  =index;  button.addEventListener('click', () => {
    console.log('newIndex: ',popups[newIndex]);
    popups[newIndex].classList.add("closePopup");
      });
});
</script>
</body>
</html>

答案 1 :(得分：1)

class LoginView(GenericAPIView):
    serializer_class = LoginInterestedUserSerializer

    def post(self, request, *args, **kwargs):
        serializer = self.serializer_class(data=request.data, context={'request': request})
        serializer.is_valid(raise_exception=True)
        user = serializer.validated_data
        return Response({
            "user": UserSerializer(user, context=self.get_serializer_context()).data, 
            "token": AuthToken.objects.create(user)[1]
        })

const buttons = Array.prototype.slice.call(document.querySelectorAll('.button'));
buttons.forEach((button) => {
    button.addEventListener('click', () => {  
    button.parentElement.style.display ='none';
    });
});

.popup {
    border: 3px solid gray;
}
.button {
    position: absolute;
    left: -15px;
    top: -15px;
    display: block;
    border: 1px solid #000;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
}
.content-wrapper {
    max-height: 50vh;
    overflow-y: auto;
    padding: 20px;
} 
.content {
    overflow: hidden;    
}

.popup {
    width: 300px;
    position: relative;
    position: fixed;
    right:30px;
}

.popup:nth-child(1) {
    bottom:30px;
}
.popup:nth-child(2) {
    bottom:130px;
}
.popup:nth-child(3) {
    bottom:230px;
}