<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New Document </title>
<link rel="stylesheet" rev="stylesheet"href="style.css" type="text/css" />
<script type="text/javascript">
functionopenContent(x){
document.getElementById("content").style.display="block"
document.getElementById("content_img").getElementsByTagName("img")[0].src=document.getElementsByTagName("img")[x].alt
document.getElementById("content_img").style.display="block"
}
functioncloseContent(x){
document.getElementById("content").style.display="none"
x.parentNode.style.display="none"
}
</script>
<style type="text/css">
table{width:90%
height:90%
margin:auto
text-align:center
margin-top:20px}
#photo{margin:auto
width:1000px
height:678px
border:1pxsolid #ccc
margin:10px
float:left}
.photoTitle{height:30px}
#content{display:none
position:absolute
width:100%
height:100%
z-index:1
background:#000
top:0px
filter:alpha(opacity=85)}
#content_img{display:none
position:absolute
z-index:2
width:100%
text-align:center
top:100px
left:0px
}
</style>
</head>
<body>
<div id="top"><div id="txt">成功没有早晚<br/>    努力就有收获</div>
</div>
<div id="nav">
<ul>
<li><ahref="index.html" target="_self">首页</a></li>
<liclass="bar">|</li>
<li><ahref="diary.html" target="_self">日志</a></li>
<liclass="bar">|</li>
<li><ahref="photo.html" target="_self">相册</a></li>
<liclass="bar">|</li>
<li><ahref="#" target="_self">留言</a></li>
</ul>
</div>
<div id="main">
<divid="photo">
<h4>|图片列表</h4>
<table>
<trclass="photoTitle"><td><ahref="javascript:openContent(0)">图片</a></td>
<td><ahref="javascript:openContent(1)">图片</a></td>
<td><ahref="javascript:openContent(2)">图片</a></td></tr>
<trvalign="top"><td><ahref="javascript:openContent(0)"><imgsrc="img/1.png" title="单击显示大图"alt="img/1.jpg"/></a></td>
<td><ahref="javascript:openContent(1)"><imgsrc="img/2.png" title="单击显示大图" alt="img/2.jpg"/></a></td>
<td><ahref="javascript:openContent(2)"><imgsrc="img/3.png" title="单击显示大图"alt="img/3.jpg"/></a></td></tr>
<trclass="photoTitle"><td><ahref="javascript:openContent(3)">图片</a></td>
<td><ahref="javascript:openContent(4)">图片</a></td>
<td><ahref="javascript:openContent(5)">图片</a></td></tr>
<trvalign="top"><td><ahref="javascript:openContent(3)"><imgsrc="img/3.png" title="单击显示大图"alt="img/3.jpg"/></a></td>
<td><ahref="javascript:openContent(4)"><img src="img/2.png"title="单击显示大图" alt="img/2.jpg"/></a></td>
<td><ahref="javascript:openContent(5)"><imgsrc="img/1.png" title="单击显示大图"alt="img/1.jpg"/></a></td></tr>
<trclass="photoTitle"><td><ahref="javascript:openContent(6)">图片</a></td>
<td><ahref="javascript:openContent(7)">图片</a></td>
<td><ahref="javascript:openContent(8)">图片</a></td></tr>
<trvalign="top"><td><ahref="javascript:openContent(6)"><imgsrc="img/2.png" title="单击显示大图"alt="img/2.jpg"/></a></td>
<td><ahref="javascript:openContent(7)"><imgsrc="img/1.png" title="单击显示大图"alt="img/1.jpg"/></a></td>
<td><ahref="javascript:openContent(8)"><imgsrc="img/3.png" title="单击显示大图"alt="img/3.jpg"/></a></td></tr>
</table>
</div>
</div>
<div id="content"></div>
<div id="content_img">
<imgsrc="" id="img_dis"/><br/>
<buttononclick="closeContent(this)" id="content_btn">关闭窗口</button>
</div>
<div id="bottom">
底部个人信息
</div>
</body>
</html>
效果如下：（至于再点击大图后效果消失，你可以把关闭窗口按钮触发的代码改成单击后的代码）
<div class="mask-box"></div>
<div class="dialog-box">
d窗内容
</div>
通过fixed定位实现, ".mask-box" 模拟背景,".dialog-box"作为d窗容器，里面写d窗的内容。
通过控制样式，切换 display:block display: none实现点击出现、点击关闭d窗。
.mask-box{
/* 切换 display:block display: none*/
position: fixed
left: 0
right: 0
top: 0
bottom: 0
background:rgba(0,0,0,0.7)
z-index: 98
}
.dialog-box{
/* 切换 display:block display: none*/
position: fixed
left: 50%
top: 50%
transform: translate(-50%,-50%)
width: 300px
height: 200px
background: #fff
/* 按实际情况 设置z-index */
z-index: 98
}
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，输入问题基础代码。
2、在index.html中的<body>标签中，输入js代码：
function fun() {
alert('click success!')
}
3、浏览器运行index.html页面，此时点击按钮d出了提示框。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）