原生JS与CSS简单实现自定义弹出框的原理(不使用iframe)_css修改原生jsalte弹窗样式

作者：凡人多烦事01 | 2024-02-19 01:00:12

踩

css修改原生jsalte弹窗样式

直接步入正题，我们要实现的效果就像很多官网中点击登录按钮之后弹出的一个弹出页面，效果图如下：(因为我主要说的是实现思路，演示的效果图不是太美观)
在这里插入图片描述
分析：
1.点击按钮出现弹出层：这里肯定需要使用到JavaScript
2.弹出层的布局：使用CSS中的绝对定位
(想要直接copy整个代码的同学直接跳到最后面☆☆☆最终代码)

第一步.实现弹出层最关键的的在于弹出层怎么写：
1.编写一个占据浏览器大小的黑色半透明的大盒子作为弹出层
2.在这个黑色半透明的大盒子中加入一个白色的小盒子作为登录页

<style>
	.show-box{
     
		position: fixed; /*根据浏览器进行绝对定位*/
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.5); /*设置为半透明的黑色 */
		display: none;/*弹出层一开始不显示*/
	}
	
	.login-page{
     
		width: 400px;
		height: 400px;
		margin: 0 auto;/*登录页面居中*/
		margin-top: 200px;
		background-color: white;
	}
</style>
<body>
	<!-- 1.编写黑色半透明大盒子作为弹出层 -->
	<div id="show" class="show-box">
	<!-- 2.在黑色半透明大盒子中编写一个小盒子作为登录页面 -->
	<div class="login-page">
	</div>
	</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

在这里插入图片描述

其中最重要的两个属性
position: fixed;–>根据浏览器进行绝对定位，位置不会因为滚轴滚动页面而发生变化
background-color: rgba(0,0,0,0.5);–>rgba可以设置透明色，实现半透明
弹出层编写完后，在弹出层中编写一个用于登录的白色盒子，在这个白色盒子里，必须加一个用于把弹出层关闭的按钮。

第二步：编写一个按钮，点击该按钮使得弹出框显示，再编写关闭弹出框的事件。

<style>
	.show-box{
     
		position: fixed; /*根据浏览器进行绝对定位*/
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;1
2
3
4
5
6
7

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/111715