DIV实现完美模式窗口

最新推荐文章于 2022-05-28 05:41:38 发布

linuxchyu

最新推荐文章于 2022-05-28 05:41:38 发布

阅读量846

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/linuxchyu/article/details/16984595

版权

html/css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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=gb2312" />
<title>无标题文档</title>
<style>
.black_overlay{
   display: none;
   position: absolute;
   top: 0%;
   left: 0%;
   width: 100%;
   height: 100%;
   background-color: black;
   z-index:1001;
   moz-opacity: 0.3;
   opacity:.30;
   filter: alpha(opacity=30);
}
.white_content {
   display: none;
   position: absolute;
   top: 25%;
   left: 25%;
   width: 50%;
   height: 50%;
   padding: 16px;
   border: 16px solid orange;
   background-color: white;
   z-index:1002;
   overflow: auto;
}
</style>
</head>
<body>
<p>单击 <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</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'">Close</a>
<h3>www.66css.com</h3>
</div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>

linuxchyu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV实现完美模式窗口

无标题文档.black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; moz-opacity: 0.3;
复制链接

扫一扫