纯CSS写弹出层样式

最新推荐文章于 2023-03-03 07:40:09 发布

因火成烟

最新推荐文章于 2023-03-03 07:40:09 发布

阅读量8.9k

点赞数 1

文章标签： css web前端 js html 弹出层

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

版权

弹出层的js比较好控制，给按钮添加点击事件，然后让弹出层显示，背景变暗并且不能点击；

样式是纯css写的

需要用到定位 position;使用position定位时需要注意定位是相对定位（reltive）还是绝对（abslute），绝对定位是继承他的父元素的。还有fixed;这个是让元素固定；不跟随滚动移动；

当然，position的属性之后还有top。bottom和left.，right;使用像素确定位置；

margin是表示元素的外边距，当出现这样的写法/*margin: -102px 0 0 -202px;*/时，即边距出现负值，表示该边距向具体的方向延伸，这句的意思就是向上延伸102px；向右和向下延伸0px;向左202px;

margin：10px 20px；这中写法就是上下外边距是10px;左右20px;

当元素内的内容溢出元素框的时候使用overflow属性；根据不同的处理有不同的处理的属性值。

hidden内容会被修剪，其余不会显示。

visible;默认，内容不会被修剪，其余内容溢出显示。

scorll，出现滚动条，可以看全部内容

auto,如果被修剪，出现滚动条

inherit，继承父元素的overflow;

opacity,透明度；0-1之间的值

filter:alpha(opacity=50);和opacity功能一样;

上面都是这次弹出层实现时用到的；

具体设计思路：

2个div，不要包含，第一个用来表示底层，需要在弹出层弹出时变暗的元素；宽度和高度要和body一样；

第二个用来放弹出层；有标题和关闭按钮；

给标题（h2）加上背景和底边框；

代码如下：

html,body
{
	height: 100%;
	overflow: hidden;
}
body,div,h2{
	margin: 0;
	padding: 0;
}
center{
	padding-top: 10px;
}
button{
	cursor: pointer;
}
#outer{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.5;
	filter:alpha(opacity=50);
	display: none;
}
#windows{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 200px;
	background: #fff;
	border: 4px solid #F90;
	margin: -102px 0 0 -202px;
	display: none;
}
h2{
	text-align: right;
	background: #FC0;
	border-bottom: 3px solid #F90;
/*	padding: 5px;*/
}
h2 span{
	color: #F90;
	cursor: pointer;
	background: #FFF;
	border: 1px solid #F90;
	padding: 0 2px;
}
p{
	text-align: justify;
	text-indent: 2em;
}

文本左右对齐使用 text-align:justify;首行缩进4个字节（2em）;

js里面需要给弹出层写上关闭按钮

var over = document.getElementById("outer");
var win = document.getElementById("windows");
var c = document.getElementById("close");
var oBt = document.getElementsByTagName("button")[0];
oBt.οnclick= function(){
	over.style.display= "block";
	win.style.display="block";
	c.οnclick= function(){
		over.style.display="none";
		win.style.display="none";
	}
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="d.css">
</head>
<body>
	  <div id="outer">
	  </div>
	  <div id="windows">
		  <h2>title<span id="close">*</span></h2>
		  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt optio ullam asperiores, quia modi tenetur, blanditiis, debitis dolore voluptatem tempora excepturi accusantium. Ducimus blanditiis fugiat dolor, officia consequatur provident illo!</p>
	  </div>
	  <center><button>弹出层</button></center>
	<script src="d.js"></script>
</body>
</html>

因火成烟

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
纯CSS写弹出层样式

弹出层的js比较好控制，给按钮添加点击事件，然后让弹出层显示，背景变暗并且不能点击；样式是纯css写的需要用到定位 position;使用position定位时需要注意定位是相对定位（reltive）还是绝对（abslute），绝对定位是继承他的父元素的。还有fixed;这个是让元素固定；不跟随滚动移动；当然，position的属性之后还有top。bottom和left.，right;
复制链接

扫一扫