DIV+JS点击弹处层代码,可以根据id不同在一个页面多次使用

适合同一个页面点击显示相信信息的情况,比如新闻列表点击显示新闻详细不需要在新窗口打开.

<!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>
<title>DIV+JS点击弹处层代码,可以根据id不同在一个页面多次使用</title>
<meta name="keywords" content="DIV+JS点击弹处层代码,可以根据id不同在一个页面多次使用" />
<meta name="description" content="DIV+JS点击弹处层代码,可以根据id不同在一个页面多次使用" />
<style>

html, body {
height: 100%;
width: 100%;
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
border: 12px solid #D6E9F1;
z-index:9999;
}

</style>
<script>
function show(tag){
var SonContent=document.getElementById(tag);
SonContent.style.display='block';

}
function hide(tag){
var SonContent=document.getElementById(tag);
SonContent.style.display='none';
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="show('SonContent1')">打开DIV1</a>
<div id="SonContent1" class="white_content"> <a href="javascript:void(0)" onclick="hide('SonContent1')"> 关闭DIV1</a></div>

<a href="javascript:void(0)" onclick="show('SonContent2')">打开DIV2</a>
<div id="SonContent2" class="white_content"> <a href="javascript:void(0)" onclick="hide('SonContent2')"> 关闭DIV2</a></div>

</body>
</html>

posted on 2013-09-12 08:13 jianghao 阅读(257) 评论(0) 收藏举报