html-透明背景层

最新推荐文章于 2021-06-22 10:20:52 发布

baihui2503

最新推荐文章于 2021-06-22 10:20:52 发布

阅读量110

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/hwaggLee/p/6554552.html

版权

<!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>jquery手写弹出层背景半透明，内容不透明</title>
<script src="jquery.min.js"></script>
</head>
<body>
<style>
*{ margin:0; padding:0;}
.alertDiv{ position:fixed; width:100%; height:100%; top:0; color:#fff;}
.alertCon{ position:absolute; width:100%; height:100%; text-align:center; margin-top:20%; z-index:999;}
.alertBg{ position:absolute; width:100%; height:100%; background:#000; opacity:0.7; z-index:99;}
</style>
<div class="alertDiv">
    <div class="alertCon">
        <img src="QQ截图20170306172127.png" />
    </div>
    <div class="alertBg"></div>
</div>

<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
</body>
</html>