怎么在以下代码的div中添加一个关闭按钮
目前是鼠标移动到热区，DIv图层自动弹出，里边有部分连接，鼠标点击图层以外的其他位置，图层消失。。我想达到的目的是：鼠标单击热区，图层弹出，点击图层上的关闭按钮，图层关闭...
目前是鼠标移动到热区，DIv图层自动弹出，里边有部分连接，鼠标点击图层以外的其他位置，图层消失。。
我想达到的目的是：鼠标单击热区，图层弹出，点击图层上的关闭按钮，图层关闭。。
以下是代码。。谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).bind('click',function(ev){
var ev=ev||window.event;
var elem=ev.target||ev.srcElement;
$("div[name='point1']").each(function(){
$(this)[0].className=$(this)[0].className.replace(" on","");
});
});
</script>
<style type="text/css">
* { margin:0; padding:0; list-style:none; font-size:12px; line-height:20px;}
a:link,a:visited{color:#164A84;text-decoration:none;}
a:hover,a:active{color:#c00;text-decoration:underline;}
.mymap { width:900px;height:700px;}
.postion {position:absolute;}
.point {width:0;height:0;position:absolute;left:27px;top:33px;width:0;height:0;}
.point ul { display:none;}
.list_001 { position:absolute; left:5px;top:5px;width:150px; padding:5px;background:#fff;border:1px solid #c00;}
.list li { float:left; padding:0 5px;width:40px;}
.on ul { display:block;}
</style>
<base>
<body >
<div class="mymap">
<img src="测试底图.jpg" width="791" height="242" border="0" usemap="#mapa" />
<map name="mapa" id="mapa">
<area shape="rect" coords="13,71,73,103" onmouseover="javascript:show('point_001')" />
</map>
<div class="point" name="point1" id="point_001">
<ul class="list_001">
<li><a href="http://www.baidu.com/">测试2-001</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
function show(name){
$("div[id="+name+"]")[0].className += " on";
}
</script>
</body>
</html> 展开
我想达到的目的是：鼠标单击热区，图层弹出，点击图层上的关闭按钮，图层关闭。。
以下是代码。。谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).bind('click',function(ev){
var ev=ev||window.event;
var elem=ev.target||ev.srcElement;
$("div[name='point1']").each(function(){
$(this)[0].className=$(this)[0].className.replace(" on","");
});
});
</script>
<style type="text/css">
* { margin:0; padding:0; list-style:none; font-size:12px; line-height:20px;}
a:link,a:visited{color:#164A84;text-decoration:none;}
a:hover,a:active{color:#c00;text-decoration:underline;}
.mymap { width:900px;height:700px;}
.postion {position:absolute;}
.point {width:0;height:0;position:absolute;left:27px;top:33px;width:0;height:0;}
.point ul { display:none;}
.list_001 { position:absolute; left:5px;top:5px;width:150px; padding:5px;background:#fff;border:1px solid #c00;}
.list li { float:left; padding:0 5px;width:40px;}
.on ul { display:block;}
</style>
<base>
<body >
<div class="mymap">
<img src="测试底图.jpg" width="791" height="242" border="0" usemap="#mapa" />
<map name="mapa" id="mapa">
<area shape="rect" coords="13,71,73,103" onmouseover="javascript:show('point_001')" />
</map>
<div class="point" name="point1" id="point_001">
<ul class="list_001">
<li><a href="http://www.baidu.com/">测试2-001</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
function show(name){
$("div[id="+name+"]")[0].className += " on";
}
</script>
</body>
</html> 展开
2个回答
展开全部
（一）加入关闭按钮只要再加一个onclick 时间就行了，turnoff（‘ ’）里的参数可以改变。代码如下
<html><meta charset="gbk"><head><script>var hide=function(){ var divs=document.getElementsByTagName("div"); for (var i=0;i<divs.length ;i++ ) { divs[i].style.display="none"; }}window.onload=function(){ hide(); var a=document.getElementsByTagName("td"); for(var i = 0; i < a.length; i++) { a[i].onclick = function(oEvent) { oEvent = oEvent || event;hide(); document.getElementById("div"+this.id).style.display="block"; } }}// 加入关闭操作的函数function turnoff(obj){document.getElementById(obj).style.display="none";}</script></head><body><table ><tr><td id="1"><a href="#">弹出层1</a></td><td id="2"><a href="#">弹出层2</a></td><td id="3"><a href="#">弹出层3</a></td></tr></table><div id="div1" style="background:#0F0; width:200px; height:100px;"><p>层1 </p><a href="#" onclick="turnoff('div1')">点击关闭</a></div><div id="div2" style="background:#00F;width:200px; height:100px;"><p>层2 </p><a href="#" onclick="turnoff('div2')">点击关闭</a></div><div id="div3" style="background:#F00;width:200px; height:100px;"><p>层3 </p><a href="#" onclick="turnoff('div3')">点击关闭</a></div></body></html>（二）点击div之外的地方隐藏div，方法多种，但都是通过 js操作到事件源，判断这个事件源的ID是不是在要隐藏的div 即点击事件发生的范围是否在div之外，但前提是事件不能和你前面写的js事件发生冲突。 注册一个document.onclick或者document.onmousedown事件来监控鼠标点击div以外的区域时事件，你给这个div的id属性赋一个页面唯一的值比如<div id="tAnChu" />
代码如下：
document.onclick = function (event) { var e = event || window.event; var elem = e.srcElement||e.target; while(elem) { if(elem.id == "tAnChu") { return; } elem = elem.parentNode; } //隐藏div的方法 HiddenDiv(); }
上个单一div事例：
<html> <head> <script type='text/javascript'> window.onload = function(){ document.onclick = function(e){ e = e || window.event; var dom = e.srcElement|| e.target;if(dom.id !="tAnChu" && document.getElementById("tAnChu").style.display == "block") { document.getElementById("tAnChu").style.display = "none"; } }; }; function openTanChu(e) { document.getElementById("tAnChu").style.display = "block"; e = e||window.event; if(+'\v1') { e.stopPropagation(); } else { e.cancelBubble = true; } } </script> <style> #tAnChu{ position:fixed; left:40%; top:100px; background-color:#ccc; width:200px; height:120px; display:none; } </style></head><body><input type="button" value="打开" onclick="openTanChu(event)" /> <div id="tAnChu"> 这是弹出层 </div></body>
<html><meta charset="gbk"><head><script>var hide=function(){ var divs=document.getElementsByTagName("div"); for (var i=0;i<divs.length ;i++ ) { divs[i].style.display="none"; }}window.onload=function(){ hide(); var a=document.getElementsByTagName("td"); for(var i = 0; i < a.length; i++) { a[i].onclick = function(oEvent) { oEvent = oEvent || event;hide(); document.getElementById("div"+this.id).style.display="block"; } }}// 加入关闭操作的函数function turnoff(obj){document.getElementById(obj).style.display="none";}</script></head><body><table ><tr><td id="1"><a href="#">弹出层1</a></td><td id="2"><a href="#">弹出层2</a></td><td id="3"><a href="#">弹出层3</a></td></tr></table><div id="div1" style="background:#0F0; width:200px; height:100px;"><p>层1 </p><a href="#" onclick="turnoff('div1')">点击关闭</a></div><div id="div2" style="background:#00F;width:200px; height:100px;"><p>层2 </p><a href="#" onclick="turnoff('div2')">点击关闭</a></div><div id="div3" style="background:#F00;width:200px; height:100px;"><p>层3 </p><a href="#" onclick="turnoff('div3')">点击关闭</a></div></body></html>（二）点击div之外的地方隐藏div，方法多种，但都是通过 js操作到事件源，判断这个事件源的ID是不是在要隐藏的div 即点击事件发生的范围是否在div之外，但前提是事件不能和你前面写的js事件发生冲突。 注册一个document.onclick或者document.onmousedown事件来监控鼠标点击div以外的区域时事件，你给这个div的id属性赋一个页面唯一的值比如<div id="tAnChu" />
代码如下：
document.onclick = function (event) { var e = event || window.event; var elem = e.srcElement||e.target; while(elem) { if(elem.id == "tAnChu") { return; } elem = elem.parentNode; } //隐藏div的方法 HiddenDiv(); }
上个单一div事例：
<html> <head> <script type='text/javascript'> window.onload = function(){ document.onclick = function(e){ e = e || window.event; var dom = e.srcElement|| e.target;if(dom.id !="tAnChu" && document.getElementById("tAnChu").style.display == "block") { document.getElementById("tAnChu").style.display = "none"; } }; }; function openTanChu(e) { document.getElementById("tAnChu").style.display = "block"; e = e||window.event; if(+'\v1') { e.stopPropagation(); } else { e.cancelBubble = true; } } </script> <style> #tAnChu{ position:fixed; left:40%; top:100px; background-color:#ccc; width:200px; height:120px; display:none; } </style></head><body><input type="button" value="打开" onclick="openTanChu(event)" /> <div id="tAnChu"> 这是弹出层 </div></body>
追问
能留个QQ号么 有些问题想追下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
代码：
<!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>无标题文档</title>
</head>
<body>
<div id="div1" style="padding-top:500px;float:left">
<a href="zhuye.html"><input type="butoon" id="butoon1" name="注册" value="注册"/></a>
</div>
<div id="div2" style="padding-top:500px;float:left">
<a href="zhuye.html"><input type="butoon" id="butoon2" name="主页" value="主页" />
</div>
<div id="div3" style="padding-top:500px ">
<a href="zhuye.html"><input type="butoon" id="butoon3" name="释义" value="释义"/></a>
</div>
</body>
</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>无标题文档</title>
</head>
<body>
<div id="div1" style="padding-top:500px;float:left">
<a href="zhuye.html"><input type="butoon" id="butoon1" name="注册" value="注册"/></a>
</div>
<div id="div2" style="padding-top:500px;float:left">
<a href="zhuye.html"><input type="butoon" id="butoon2" name="主页" value="主页" />
</div>
<div id="div3" style="padding-top:500px ">
<a href="zhuye.html"><input type="butoon" id="butoon3" name="释义" value="释义"/></a>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
