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>

效果如下

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

效果如下

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

vue点击按钮显示弹窗写法相关推荐

JQ 实现点击按钮显示弹窗，点击非弹窗和按钮区域隐藏弹窗
2019独角兽企业重金招聘Python工程师标准>>> /*标题栏弹窗*/$("#menu_div").click(function (e) {$(". ...
vue点击按钮怎么跳转图片_vue页面跳转
一.在template中的常见写法: 点击跳转二.在js中设置跳转(在方法中跳转界面并传参,两种方式:params 与 query): 有时候我们需要的是点击按钮跳出弹窗,选择判断后进行跳转,我们常 ...
给页面字段中添加一个按钮，点击按钮实现弹窗效果
页面效果: 点击按钮后弹窗效果: 点击左上角搜索框效果: 页面实现代码首先配置一个入住房间字段 <field><header>入住房间</header><d ...
如何在网页点击按钮显示的图片
<template><div><button @click="getData">大力出奇迹</butt ...
vue 点击按钮弹出视频播放+自动播放问题
单纯点击弹出视频代码: <template><div><button @click="checkVideoFun()">点此观看完整视频< ...
点击按钮显示谷歌地图
原文:点击按钮显示谷歌地图 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=" ...
网页加载的不同的方式、点击按钮显示一句话、jQuery中获取元素的方法
网页加载的不同的方式 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
React 点击按钮显示div与隐藏div
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>R ...
jquery点击按钮显示和隐藏div
[转]jquery点击按钮显示和隐藏DIv 1 function changeDisplay() { 2 if ($("#btnShow").attr("value&qu ...

vue点击按钮显示弹窗写法

案例1

效果如下

案例2

案例3

效果如下

vue点击按钮显示弹窗写法相关推荐

最新文章

热门文章