作者:FEEL欧诺_625 | 来源:互联网 | 2022-03-21 14:44
本文实例为大家分享了js实现弹窗效果的具体代码,供大家参考,具体内容如下
思路:
1.创建一个按钮,点击弹出弹窗
2.建立一个弹窗页面 固定定位 默认隐藏
3.将弹窗内容放在弹窗页面的中间
4.js将事件绑定按钮,点击后让弹窗页面显示
5.js事件绑定span标签,点击后让弹窗页面消失
代码如下
CSS:
#myModal{
display: none;
position: fixed;
z-index:1;
left:0;
top:0;
width: 100%;
height:100%;
overflow: auto;
background:rgba(0,0,0,0.5);
}
#myModal .modal{
width: 500px;
height:300px;
position: relative;
top:50%;
left:50%;
margin-top: -150px;
margin-left: -250px;
animation:animate 1s;
}
.modal .modal-header{
height:50px;
background:white;
color: #000;
line-height:50px;
border-bottom: 1px solid #000000;
}
.modal .modal-header p{
display: inline-block;
margin:0;
position: absolute;
left: 20px;
}
.modal .modal-header .close{
position: absolute;
right:20px;
font-size: 20px;
cursor:pointer;
}
.modal .modal-content{
background: white;
height:200px;
text-align: center;
line-height: 200px;
}
.modal .modal-content p{
margin:0;
}
.modal .modal-footer{
position: relative;
height:50px;
background: white;
}
/*添加动画*/
@keyframes animate{
from{top:0;opacity:0}
to{top:50%;opacity:1}
}
js:
window.Onload=function () {
//获取弹窗按钮
var btn=document.getElementById("btn");
var close=document.getElementsByClassName("close")[0];
var myModal=document.getElementById("myModal");
//按钮绑定事件
btn.Onclick=function () {
//获取弹窗
myModal.style.display="block";
}
close.Onclick=function () {
myModal.style.display="none";
}
//用户点击其他地方关闭弹窗
window.Onclick=function (event) {
if(event.target ==myModal){
myModal.style.display="none";
}
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
本文内容为asp.net微信公众平台开发的目录汇总,包括数据库设计、多层架构框架搭建和入口实现、微信消息封装及反射赋值、关注事件、用户记录、回复文本消息、图文消息、服务搭建(接入)、自定义菜单等。同时提供了示例代码和相关的后台管理功能。内容涵盖了多个方面,适合综合运用。 ...
[详细]
蜡笔小新 2023-12-14 22:40:22
-
本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ...
[详细]
蜡笔小新 2023-12-14 14:37:52
-
-
本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ...
[详细]
蜡笔小新 2023-12-14 13:11:00
-
本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ...
[详细]
蜡笔小新 2023-12-14 12:09:13
-
本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ...
[详细]
蜡笔小新 2023-12-14 12:05:06
-
本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ...
[详细]
蜡笔小新 2023-12-14 12:01:13
-
在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ...
[详细]
蜡笔小新 2023-12-14 10:57:47
-
本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ...
[详细]
蜡笔小新 2023-12-14 10:11:46
-
本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ...
[详细]
蜡笔小新 2023-12-14 10:06:19
-
本文讲述了作者通过点火测试男友的性格和承受能力,以考验婚姻问题。作者故意不安慰男友并再次点火,观察他的反应。这个行为是善意的玩人,旨在了解男友的性格和避免婚姻问题。 ...
[详细]
蜡笔小新 2023-12-14 09:10:09
-
本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ...
[详细]
蜡笔小新 2023-12-13 21:31:18
-
1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ...
[详细]
蜡笔小新 2023-12-13 19:12:25
-
1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ...
[详细]
蜡笔小新 2023-12-13 18:03:01
-
本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ...
[详细]
蜡笔小新 2023-12-13 16:16:05
-
本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ...
[详细]
蜡笔小新 2023-12-13 15:50:17
-
FEEL欧诺_625
这个家伙很懒,什么也没留下!