vue点击按钮显示弹窗写法_vue点击按钮弹出提示框-程序员宅基地
技术标签： css vue vue.js js方法 javascript jscript 点击按钮出现弹窗
案例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">×</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>
效果如下
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！
智能推荐
linux raw socket 原始套接字_linux raw通信-程序员宅基地
文章浏览阅读344次。TCP socket，UDP socket只能处理传输层数据，而原始套接字raw socket绕过传输层直接获取网络链路层的数据包。我们平时用的tcpdump, libpcap都是基于raw socket实现的。一般使用方法如下： // raw socket int rawsock = socket(AF_PACKET, SOCK_RAW, htons(ETH_P_IP)); if (rawsock < 0) { perror("SOCK_RAW err_linux raw通信
梯度下降优化算法总结-程序员宅基地
文章浏览阅读1.7w次，点赞14次，收藏74次。本次介绍梯度下降优化算法。主要参考资料为一篇综述《An overview of gradient descent optimization algorithms》_梯度下降优化算法
scanner java重新输入_关于java中scanner对象重复使用的问题-程序员宅基地
文章浏览阅读1.3k次。Scannerscanner=newScanner(System.in);inti=scanner.nextInt();System.out.println(i);intj=scanner.nextInt();System.out.println(j);这样是通过一个scanner对象两次输入分别给两个变量赋值，没有问题，执行后一切正常。Scannerscanner=new..._scanner重复使用
【矢量图】PyEcharts导出图片并矢量化_echarts 导出矢量图-程序员宅基地
文章浏览阅读3.3k次，点赞10次，收藏17次。前言图是门面，但朦胧美并不是文章所需要的问题处理导出图片（JPEG、PNG）的方式，网上很多就不再赘述了，这里咱还是矢量化下吧。网上说用phantomjs-prebuilt.js，我也试了没太整明白。然后 <a id="download" href="">下载</a> <script> const a = window.document.querySelector('#download') a.addEventListener('cl_echarts 导出矢量图
有关大数据的误区：数据统计≠大数据_大数据是不是是以经发生过的事情-程序员宅基地
文章浏览阅读545次。关于大数据的误区：数据统计是已经发生的事情，而大数据往往被用于还没有发生的事情预测或者推荐中，二者不能划等号。不过，无论数据统计也好，大数据也罢，都是为了使工作变得更为有效，让决策更为理性而准确。大数据太火了，被广泛应用到各行各业，而近阶段又有着明显的过热迹象。大数据到底是一个营销词汇，还是一个方法论？本文作者老李正是一家大数据服务提供商的资深员工，他所做的项目就是针对不同行业_大数据是不是是以经发生过的事情
搭建企业线上培训系统_线上培训平台部署架构-程序员宅基地
文章浏览阅读593次。企业线上培训系统的出现，一些集团公司的内部例会，决策会议或培训会议，可以通过线上统一进行，不再需要集中企业所有员工到指定地点培训。普通企业可以在外网租用线上培训系统，而对于一些涉密单位数据如何保障安全？企业线上培训系统根据网络环境有不同的部署方式，哪种部署更适合自身需求呢？1、纯内网部署企业线上培训系统，部署在防火墙内，供企业内部培训使用企业这样部署在线培训系统，所有数据都内网服务器上，丢失风险低，安全性高，并且内网网络带宽可以得到保障。连通宝采用软硬一体的部署方式，稳定性也可以得到保障。_线上培训平台部署架构
随便推点
Python 进程+协程并发小练习 假设10w个url地址每个请求1秒尝试用4个进程每个进程开启1000个协程去请求统计运行时间_python每秒并发1000个请求-程序员宅基地
文章浏览阅读8.5k次，点赞9次，收藏12次。练习题目进程+协程实现并发小练习假设一个队列中有100000个url地址，每个请求需要1秒钟，尝试用4个进程每个进程开启1000个协程去请求，统计运行时间示例代码# -*- coding: utf-8 -*-# @Time : 2020/12/22 1:49 下午# @Author : Benjamin# @File : testGevent.py# @Software: PyCharmfrom gevent import monkey;mon..._python每秒并发1000个请求
微信小程序在线考试系统 毕业设计（1）首页_考试小程序首页代码-程序员宅基地
文章浏览阅读2.2k次，点赞3次，收藏25次。wxml代码<view> <!--广告图片 mode="widthFix" 设定高度随宽度自动变化--> <image class="ad01" src="/img/1.png" mode="widthFix"></image></view><view class="chaxun"> <input class="chaxun_zuo" type="text" name="cx_neirong" .._考试小程序首页代码
Java实现“扑克牌游戏”底层逻辑_利用数组随机生成扑克牌-程序员宅基地
Java实现“扑克牌游戏”底层逻辑，包括纸牌类的元素、构造方法和牌堆类的实现。
JavaScript循环_js用户登录验证限制次数while循环做法-程序员宅基地
文章浏览阅读819次。循环是重复性做一件事外面没办法控制每次循环的时间长度循环会增大您的程序时间复杂度(不建议无限循环嵌套 一般情况下不会超过两次)死循环是不会停止的 回导致内存溢出 从而蓝屏循环很多种 常见的三种:while,do while,forwhile循环写法是定义初始值while(布尔类型表达式){循环体 (迭代 初始值变化 操作)var i = 0//初始值定义while (i<5){i++ //不迭代会导致死循环conlose.log(i)//操作 123.._js用户登录验证限制次数while循环做法
图像分割FCN全卷积神经网络_cloudfcn-程序员宅基地
文章浏览阅读1.4k次。FCN全卷积神经网络是图像分割的基础网络FCN实现了端到端的网络，输入mxm图像，输出为mxmxc的图像，其中c代表种类。思想概述FCN叫做全卷积神经网络，顾名思义所有曾都是卷积层！也就是抛掉了全连接层，这是第一个改变；再者卷积神经网络卷到最后特征图尺寸越来越少，分辨率比较小，不适合我们做图像分割，好，这里引入一个上采样的做法，卷积完之后再上采样到大尺寸图；网络又考虑层数不断叠加后原图的信息..._cloudfcn
前端页面制作思路_前端页面设计的思路-程序员宅基地
文章浏览阅读3.7k次，点赞2次，收藏5次。项目中css的页面布局，需要屡顺一下思路，在继续下面的学习。温故而知新！W3C标准：是万维网制定的一系列标准，包括结构化标准语言（html、xml），表现标准语言（css），行为标准语言（DOM，ECMAScript)组成。这个标准倡要将结构，样式，行为分离。在网页制作中，面对设计图，网页制作人员一般要遵循的原则：先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html..._前端页面设计的思路