div弹出框/弹出层简单实现办法

最新推荐文章于 2023-02-14 14:50:02 发布

zurich1979

最新推荐文章于 2023-02-14 14:50:02 发布

阅读量1.8w

点赞数 1

分类专栏：技术文章标签： div 弹出框实现

本文链接：https://blog.csdn.net/zurich1979/article/details/35989513

版权

技术专栏收录该内容

34 篇文章 0 订阅

订阅专栏

弹出框实现办法非常多，但是有不少实现办法比较复杂，如果使用的话会使得本就复杂的网站代码更大更乱，

该方法通过div实现弹出，并且是把该div放在网页最上面一层，只需要照一张名为：wx01-1.jpg的文件放到代码同级目录，

就能看到效果，网络上有类似版本，这个版本有不同的实现。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击文字弹出一个DIV层窗口代码</title>
<style>

.white_content {
display: none;
position: absolute;
top: 50%;
margin-left:-300px;
left: 50%;
margin-top:-160px;
width: 600px;
height: 315px;
padding: 0px;
border: 0px solid orange;
background-color:#FFF;
z-index:10001;
overflow: auto;
}
</style>
</head>

<body>
<p>示例弹出层：<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a></p>
<div id="light" class="white_content"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><img src="wx01-1.jpg" /></a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>