vue点击按钮显示弹窗写法

MFG_666

已于 2022-08-17 15:02:34 修改

阅读量1.2w

点赞数 13

分类专栏： vue jscript js方法文章标签： vue.js javascript css 点击按钮出现弹窗 vue

于 2022-05-16 10:28:17 首次发布

本文链接：https://blog.csdn.net/m0_49714202/article/details/124794548

版权

vue 同时被 3 个专栏收录

124 篇文章 8 订阅

订阅专栏

js方法

54 篇文章 2 订阅

订阅专栏

jscript

12 篇文章 0 订阅

订阅专栏

案例1

源码如下

<template>
  <div class="box" v-cloak>
     <div>
        <div class="mask" v-if="showModal" @click="showModal=false"></div>
        <div class="pop" v-if="showModal">
          <!-- 关闭 -->
     		内容区域
        </div>
        <button @click="showModal=true" class="btn">点击出现目录</button>
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      showModal: false,
    }
  },
  methods:{
  }
}
</script>

<style scoped>
/* 刷新弹窗样式闪烁问题去掉v-cloak下面这个样式 */
 [v-cloak] {
      display: none;
    }
.box{
  display: flex;
  flex-direction: column;
}
  .mask {
      background-color: rgb(233, 16, 16);
      opacity: 0;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1
    }

    .pop {
      position: fixed;
      background-color: #c1c8d6;
      width: 520px;
      display: flex;
      left: 50%;
      top: 0;
      bottom: 0;
      z-index: 90;
      margin-left: -20px;
      box-shadow: -20px 0 20px 0 rgb(0 0 0 / 10%);
      flex-direction: column;
      color: #fff;
    }

    .btn {
      /* background-color: #fff; */
      border-radius: 4px;
      border: 1px solid blue;
      padding: 4px 12px;
    }
</style>

效果如下

在这里插入图片描述

案例2

<template>
  <div>
    <div class="mask" v-if="showModal" @click="showModal=false"></div>
    <div class="pop" v-if="showModal">
      <button @click="showModal=false" class="btn">点击出现弹框</button>
    </div>
    <button @click="showModal=true" class="btn">点击出现弹框</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showModal: false
    };
  }
};
</script>
<style scoped>
.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.pop {
  background-color: #fff;
  position: fixed;
  top: 100px;
  left: 300px;
  width: calc(100% - 600px);
  height: calc(100% - 200px);
  z-index: 2;
}
.btn {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid blue;
  padding: 4px 12px;
}
</style>

案例3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 弹窗 (background) */
    .modal {
        display: none;
        /* 默认隐藏 */
        position: fixed;
        /* 固定定位 */
        z-index: 1;
        /* 设置在顶层 */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
    }

    /* 弹窗内容 */
    .modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }
    /* 关闭按钮 */
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
</style>

<body>
    <!-- 打开弹窗按钮 -->
    <button id="myBtn">打开弹窗</button>
    <!-- 弹窗 -->
    <div id="myModal" class="modal">
        <!-- 弹窗内容 -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>弹窗中的文本...</p>
        </div>
    </div>
</body>
<script>
    // 获取弹窗
    var modal = document.getElementById('myModal');

    // 打开弹窗的按钮对象
    var btn = document.getElementById("myBtn");

    // 获取 <span> 元素，用于关闭弹窗
    var span = document.querySelector('.close');

    // 点击按钮打开弹窗
    btn.onclick = function () {
        modal.style.display = "block";
    }

    // 点击 <span> (x), 关闭弹窗
    span.onclick = function () {
        modal.style.display = "none";
    }

    // 在用户点击其他地方时，关闭弹窗
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>

</html>

效果如下

在这里插入图片描述

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！

MFG_666

关注

13
点赞
踩
60

收藏

觉得还不错? 一键收藏
0
评论
vue点击按钮显示弹窗写法

源码如下<template> <div class="box"> <div> <div class="mask" v-if="showModal" @click="showModal=false"></div> <div class="pop" v-if="showModal">  内容区域 </.
复制链接

扫一扫