怎么制作一个div弹出层，上面需要一个查看，一个下载，右上角关闭
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么制作一个div弹出层，上面需要一个查看，一个下载，右上角关闭相关的知识，希望对你有一定的参考价值。
参考技术A 看看这是不是你需要的<html>
<head>
<meta charset="utf-8"/>
<style>
*
margin: 0;
padding: 0;
#test
width: 300px;
height: 200px;
background: #ffffff;
border: 1px solid green;
border-radius: 5px;
position: absolute;
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -150px;
#topBut
width: 100%;
border-bottom: 1px solid green;
height: 40px;
border-radius: 5px 5px 0 0;
display: -webkit-box;
.close
width: 50px;
height: 30px;
text-align: center;
border-radius: 5px;
line-height: 30px;
border: 1px solid green;
position: absolute;
left: 100%;
margin-left: -60px;
margin-top: 4px;
.close:hover
background: #008000;
color: #FFFFFF;
#botBut
position: absolute;
top: 100%;
margin-top: -40px;
width: 100%;
border-top: 1px solid green;
height: 40px;
border-radius:0 0 5px 5px;
display: -webkit-box;
.botBut
-webkit-box-flex: 1;
text-align: center;
line-height: 40px;
width: 50%;
.botBut:hover
background: #008000;
color: #FFFFFF;
</style>
</head>
<body>
<button onclick="document.getElementById('test').style.display='block'">打开消息框</button>
<div id="test">
<div id="topBut">
<div style="line-height: 40px;padding-left: 10px;">提示窗口:</div>
<div>
<div class="close" onclick="document.getElementById('test').style.display='none'">关闭</div>
</div>
</div>
<div style="padding: 5px;">
这里是内容区域--<br />
软件名称:百度知道<br />
大小:10M<br />
更新日期:今天<br />
</div>
<div id="botBut">
<div class="botBut" style="border-radius: 0 0 0 5px;">查看网页版</div>
<div class="botBut" style="border-radius: 0 0 5px 0;border-left: 1px solid green;">下载</div>
</div>
</div>
</body>
</html>本回答被提问者采纳
以上是关于怎么制作一个div弹出层，上面需要一个查看，一个下载，右上角关闭的主要内容，如果未能解决你的问题，请参考以下文章
jquery 点击弹出层的确定按钮后，弹出层关闭，部分刷新当前页面的指定的div内容