纯CSS写弹出层样式

来源：互联网发布：淘宝商家联盟编辑：程序博客网时间：2024/06/06 15:01

弹出层的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.onclick= function(){over.style.display= "block";win.style.display="block";c.onclick= 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>

0 0