怎么在以下代码的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>

(一)加入关闭按钮只要再加一个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>追问

能留个QQ号么 有些问题想追下

温馨提示:内容为网友见解,仅供参考
第1个回答  推荐于2017-10-15
代码:
<!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>

怎么在以下代码的div中添加一个关闭按钮,或者说鼠标点击页面的其它地方...
(一)加入关闭按钮只要再加一个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.disp...

如何在DIV上方悬浮一个关闭按钮
首先,得有个DIV,然后把轮播代码丢到DIV里,然后写个id为a的A标签,标签根据DIV定位到右上角,如果这时候你看到a标签不在广告上面,那你就给a标签设置z-index属性,还不行就给DIV也设上。我不大熟悉这玩意,不过大概是这样的。

html怎么可以用按钮关闭或者隐藏当前div标签,前提是不用javascript。求...
我只能说如果是.net的页面,你可以在服务器端控制,而不用javascript 如果非要按你的要求那就用 vbscript或flash中的as间接控制。真不懂你了。

为网站浮动广告代码增加个关闭按钮
<div id=AA1 STYLE="DISPLAY:INLINE"><input type="bttton" name="bt1" value="关闭" onclick="ass()"\/> Skyscraper.jpg><\/div>");在 >");这里再加个<\/div> <!-- function initEcAd() { 在<!--后加个 function ass(){document.getelementBYid("AA1").STYLE.DISPLAY=NONE} 因为...

请问图片中页面底部的悬浮窗怎么添加一个关闭按钮?代码是?
在这个div里面添加一个按钮或者 <span onclick="CloseDiv('MyDiv')">关闭<\/span>都可以,'MyDiv'就是悬浮窗div的id,js里面写个函数即可 function CloseDiv(div) { document.getElementById(div).style.display = 'none'; };若有不妥,请补充!

点击关闭div按钮
在head跟head之间加入 <script> function turnoff(obj){ document.getElementById(obj).style.display="none";} <\/script> 然后在DIV中加这句 <a href="#" onclick="javascript:turnoff(这里写DIV的ID记得要加单引号)">点击关闭<\/a> 例 <html> <head> <script> function turnoff(obj){ docum...

帮我这个浮动广告加个关闭按钮代码(代码如下)
<script type="text\/javascript"> <!-- \/\/公共脚本文件 main.js function addEvent(obj,evtType,func,cap){ cap=cap||false;if(obj.addEventListener){ obj.addEventListener(evtType,func,cap);return true;}else if(obj.attachEvent){ if(cap){ obj.setCapture();return true;}else{ return ...

制作按钮关闭当前的div的js怎么写?
getElementById(id).style.display="none";} <\/script> 上面是js部分,下面这段是html的,我尽量简化一些<div id="bar1"> <img> <p onclick="removeElement('bar1')">关闭<\/p><\/div> <div id="bar2"> <img> <p onclick="removeElement('bar2')">关闭<\/p> <\/div> ...

网站悬浮广告图片代码怎么增加个关闭按钮
广告图作为背景,给div,然后在div内放个img图片当做关闭按钮。var count;function move() { $('apDiv').style.top=document.documentElement.scrollTop+parseInt(count); } function getCount() { count=$('apDiv').currentStyle.top;} function close0() { $('apDiv'...

如何给网页两边流动对联加上关闭按钮?
点击下图片任意位置就可以关闭了,也就是在你的代码中加了句:onClick="this.style.display='none'"<DIV onClick="this.style.display='none'" style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: progid:DXImageTransform.Microsoftpadding:8px; ; LEFT: expression(eval(...

相似回答