vue点击按钮显示弹窗写法

案例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>

效果如下

vue点击按钮显示弹窗写法_第1张图片

案例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>Documenttitle>
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">×span>
            <p>弹窗中的文本...p>
        div>
    div>
body>
<script>
    // 获取弹窗
    var modal = document.getElementById('myModal');

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

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

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

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

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

html>

效果如下

vue点击按钮显示弹窗写法_第2张图片

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

你可能感兴趣的:(vue,jscript,js方法,vue.js,javascript,css,点击按钮出现弹窗,vue)