简单的点击空白处（弹窗主要内容外）关闭弹窗功能

最新推荐文章于 2023-04-24 16:14:32 发布

原创最新推荐文章于 2023-04-24 16:14:32 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue #js #html

笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何通过阻止点击事件冒泡来实现在弹窗内容外点击时关闭弹窗的功能，主要涉及CSS和Vue.js的运用。

一些方法是通过监听鼠标事件判断点击区域与目标区域是否一致来实现的，其实我们只需要在弹窗内容部分阻止点击事件冒泡就可以了。

<template>
  <div>
    <button @click="show=true" class="btn">点击打开弹窗</button>
    <!--弹窗背景蒙版-->
    <div class="pop-bg" v-if="show" @click="show=false">
        <!--主要是弹窗内容部分加上@click.stop阻止冒泡-->
        <div class="model" @click.stop="">
            <div class="close" @click="show=false">&times;</div>
            <div>弹窗内容</div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  }
};
</script>

<style scoped>
button {
  width: 200px;
  height: 66px;
}
.pop-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .2);
  display: flex;
  justify-content: center;
  align-items: center;
}
.model {
    width: 500px;
    height: 300px;
    border: 1px solid slategrey;
    position: relative;
    background: white;
}
.close {
    color: rgb(50, 50, 50);
    font-size: 30px;
    position: absolute;
    top: 10px;
    right: 25px;
    cursor: pointer;
}
</style>