首页 > 其他分享 >手写弹出框代码详解

手写弹出框代码详解

时间:2022-11-14 12:38:43浏览次数:57  
标签:hide classList top getElementsByClassName 弹出 手写 document margin 详解

1.代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<style>
.cover{
position: fixed;
/*首先将位置固定住*/
top:0;
right:0;
bottom:0;
left:0;
/*上下左右设置都为0*/
background-color: rgba(0,0,0,0.2);

z-index:99;
/*指定一个元素的堆叠顺序,数值越大,表示在越上边*/
}
.modal{
width:700px;
height:400px;
position: absolute;
top:50%;
left:50%;
margin-left: -350px;
margin-top: -200px;
background-color: white;
z-index: 100;
/*将x的位置移动*/
}
.close{
float: right;
/*在这里将x移动到右上角*/
margin-right: 15px;
margin-top: 10px;
font-size: 16px;
}
.hide{
display: none;
/*表示不显示*/
}
</style>
</head>
<body>

<button id="b1">点我弹出</button>

<div class="cover hide" ></div>
<!--这个标签通过设置CSS样式,将button及下层的东西盖住,比如注册登录窗口的弹出就需要这个-->
<!--hide表示不显示这个div标签,注意这个hide写在class里边-->

<div class="modal hide" >
<span class="close" id="s1">×</span>
<!--×表示x的意思,也可以直接写x-->
</div>

<script>
// 思考如何实现,在点击弹出按钮之后,弹出两个标签
//首先,找标签,注意这个地方是通过id处理的
var b1Ele=document.getElementById('b1')
//其次,处理事件,单击button之后,找到类属性,移除类列表中的隐藏属性
b1Ele.onclick=function (ev) {
document.getElementsByClassName('cover')[0].classList.remove('hide');
document.getElementsByClassName('modal')[0].classList.remove('hide');
//移除样式
}

var s1Ele=document.getElementById('s1')
//其次,处理事件,单击button之后,找到类属性,添加类列表中的隐藏属性
s1Ele.onclick=function (ev) {
document.getElementsByClassName('cover')[0].classList.add('hide');
document.getElementsByClassName('modal')[0].classList.add('hide');
//移除样式
}
</script>
</body>
</html>
<!--目的就是:一点添加,一点关闭,这样的操作-->

代码效果:

(1)运行

手写弹出框代码详解_ide

(2)点击"点我弹出",结果如下图

手写弹出框代码详解_处理事件_02

(3)再点击x,回到界面(1)的效果,可以反复尝试



标签:hide,classList,top,getElementsByClassName,弹出,手写,document,margin,详解
From: https://blog.51cto.com/u_11182673/5848901

相关文章

  • WinDBG详解进程初始化dll是如何加载的
    一:背景1.讲故事有朋友咨询个问题,他每次在调试WinDbg的时候,进程初始化断点之前都会有一些dll加载到进程中,比如下面这样:Microsoft(R)WindowsDebuggerVersion10.0.252......
  • htop使用详解
    Linuxhtop工具使用详解Linux查看CPU个数、核数、逻辑CPU个数#总核数=物理CPU个数X每颗物理CPU的核数#总逻辑CPU数=物理CPU个数X每颗物理CPU的核数X超线程......
  • C++ explicit关键字详解
    C++编码时,可以通过构造函数将相应的数据类型转换成为C++类的对象,从某种程度来说给编码带来了方便,但并不是每次都正确,为了避免这种情况,C++提供了explicit关键字,相对于implic......
  • 数据库Migration Tools详解
    简述MigrationTools是一个能帮你自动执行、管理和校验SQL脚本的工具。常见的Tools有Flyway、Liquibase、MybatisMigrations这里我们介绍Flyway的使用基......
  • Day10.2:九九乘法表打印详解思路
    九九乘法表打印按照以下格式对九九乘法表正确输出:/*1*1=1 1*2=2 2*2=4 1*3=3 2*3=6 3*3=9 1*4=4 2*4=8 3*4=12 4*4=16 1*5=5 2*5=10 3*5=15 4*5=20 5*5=25 1*6=6 2......
  • C# 之 Dictionary 详解
    https://blog.csdn.net/dmlk31/article/details/111206272.说明1、必须包含名空间System.Collection.Generic2、Dictionary里面的每一个元素都是一个键值对(由二个元素组......
  • html和css之背景样式详解
    背景样式详解opacity和display的区别opacity设置的是透明度,值的范围是0~1,0代表完全透明,1代表不透明display为none,浏览器就不会渲染这个元素。一个元素设置为display为none后......
  • 【Spring系列】- 手写模拟Spring框架
    简单模拟Spring......
  • mac ifconfig详解
    lo#loopback本机主机地址#flag=8049:网络设备状态标识#UP:网卡处于启动状态#LOOPBACK:IP数据包回送到本机上,通常用于测试网络配置和本地程序之间通信用#R......
  • Java中的抽象类详解
    概述由来父类中的方法,被它的子类们重写,子类各自的实现都不尽相同。那么父类的方法声明和方法主体,只有声明还有意义,而方法主体则没有存在的意义了。我们把没有方法主体的方......