js实现弹出层

最新推荐文章于 2024-04-28 17:46:18 发布

因火成烟

最新推荐文章于 2024-04-28 17:46:18 发布

阅读量690

点赞数

文章标签： js css web前端

本文链接：https://blog.csdn.net/TheFoma/article/details/44860609

版权

通过点击一个button按钮，弹出一个对话框，实现背景变暗，

1.要有2个事件，第一个就是点击按钮，弹出对话框。第二个就是点击对话框的*号关闭对话框，回复原来样式，第二个在第一个之内，就是说先弹出对话框才有关闭对话框

2.效果事件就是使用display属性，block,显示div效果，none,隐藏div效果

贴上js代码

var obtn = document.getElementsByTagName("button")[0];
var oOverlay = document.getElementById("overlay");
var oWin = document.getElementById("win");
var oClose = document.getElementById("close");
obtn.onclick = function(){
	oOverlay.style.display = "block";
	oWin.style.display ="block";
	oClose.onclick = function(){
		oOverlay.style.display="none";
		oWin.style.display="none";
	}
}

css 主要就是弹出层的样式

先要设置弹出层底层的效果，其实也就是整个body,为弹出层的父元素。

要添加透明效果，适应opacity属性，设置透明度，并且最开始要设置display为none;

弹出层，设置position为absolute,top,left,定位

弹出框的标题，字体，背景，底部边框，内边距，

关闭按钮是通过span实现的，在是标题的子元素，所以不用定位，继承父元素而定位，到最右边，需要设置内边距和边框。对话框的字设置为左右对齐，首行缩进2em;

贴上css代码

html,
body {
	height: 100%;
	overflow: hidden;
}

body,
div,
h2 {
	margin: 0;
	padding: 0;
}

center {
	padding-top: 10px;
}

#overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.5;
	filter: alpha(opacity=50);
	display: none;
}

#win {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 200px;
	background: #ccc;
	border: 4px solid #f90;
	margin: -102px 0 0 -202px;
	display: none;
}

h2 {
	font-size: 12px;
	text-align: right;
	background: #FC0;
	border-bottom: 3px solid #f90;
	padding: 0 2px;
}

h2 span {
	color: #f90;
	cursor: pointer;
	background: #fff;
	border: 1px solid #f90;
	padding: 0 2px;
}

#win p {
	text-align: justify;
	text-indent: 2em;
}

html代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="d.css">
</head>

<body>
	<div id="overlay"></div>
	<div id="win">
		<h2>标题栏<span id="close">*</span></h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed nesciunt rem, harum aspernatur impedit atque eum nisi saepe unde, expedita sunt asperiores reprehenderit, pariatur molestiae temporibus voluptas deserunt ducimus veniam!
		</p>
	</div>
	<center>
		<button type="button">弹出层</button>
	</center>
	<script src="d.js"></script>
</body>

</html>

因火成烟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现弹出层

通过点击一个button按钮，弹出一个对话框，实现背景变暗，1.要有2个事件，第一个就是点击按钮，弹出对话框。第二个就是点击对话框的*号关闭对话框，回复原来样式，第二个在第一个之内，就是说先弹出对话框才有关闭对话框2.效果事件就是使用display属性，block,显示div效果，none,隐藏div效果贴上js代码var obtn = document.getElements
复制链接

扫一扫