如何显示和隐藏层,谢谢各位?

daqi2010 2009-12-26 10:02:36
有一层 DIV ID=MYCRM
有一按钮: ID=myinfo
要实现:
当点击按钮,层显示,并且可以操作层里面的相关链接。当鼠标移开层后,层自动隐藏。
谢谢各位了
...全文
100 15 打赏 收藏 举报
写回复
15 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
dandande 2009-12-26
  • 打赏
  • 举报
回复
<div id=div style="width:200;height:100;background:gray;visibility:hidden" onmouseout={this.style.visibility="hidden"}>
<a href="" onmouseover={div.style.visibility=""}>111</a><br>
<a href="" onmouseover={div.style.visibility=""}>222</a></div>
<input type=submit value="ok" onclick={div.style.visibility=""}>
licip 2009-12-26
  • 打赏
  • 举报
回复
getElementById('div').style.display='hidden' //隐藏
这个写错了。应该是:
getElementById('div').style.display='none' //隐藏
xmliy 2009-12-26
  • 打赏
  • 举报
回复

<div id="MYCRM" style="width: 300px; height: 200px; background-color:#E6E6E6; display:none">

<a href='http://www.baidu.com'>Baidu</a>
<button type="button">测试</button>
</div>
<input type="button" id="myinfo" value="ShowInfo" />



(function() {
var btn = document.getElementById('myinfo');
var div = document.getElementById('MYCRM');
btn.onclick = function() {
div.style.display = '';
div.onmouseout = function(e) {
e = e || window.event;
var target = e.srcElement ? e.srcElement : e.target,
related = e.toElement ? e.toElement : e.relatedTarget;
if (!div.contains(related)) div.style.display = 'none';
}
}
})();
街头小贩 2009-12-26
  • 打赏
  • 举报
回复
[Quote=引用 11 楼 daqi2010 的回复:]
(学而不思则罔) 的代码刚才试过了。可以,就是感觉代码有点多,
t6new.cn) 刚才试过了。如果我在DIV里面加入一些按钮什么的,就不行了。
感谢大家
[/Quote]
忽视了事件!代码多的情况可以用框架!
daqi2010 2009-12-26
  • 打赏
  • 举报
回复
(学而不思则罔) 的代码刚才试过了。可以,就是感觉代码有点多,
t6new.cn) 刚才试过了。如果我在DIV里面加入一些按钮什么的,就不行了。
感谢大家
Click_Me 2009-12-26
  • 打赏
  • 举报
回复

<div id="MYCRM" style="width: 300px; height: 200px; background-color:#E6E6E6; display:none">
<a href='http://www.baidu.com'>Baidu</a>
</div>
<input type="button" id="myinfo" value="ShowInfo" />
<script type="text/javascript">
(function(){
var contains = function(a, b) {
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPositon(b) & 16);
}
function Event(e){
var oEvent = document.all ? window.event : e;
if (document.all) {
if(oEvent.type == "mouseout") {
oEvent.relatedTarget = oEvent.toElement;
}else if(oEvent.type == "mouseover") {
oEvent.relatedTarget = oEvent.fromElement;
}
}
return oEvent;
}
var btn = document.getElementById('myinfo');
var div = document.getElementById('MYCRM');
btn.onclick = function(){
div.onmouseout = function(event){
var target = Event(event).relatedTarget;
if(!contains(this, target)){
this.style.display = 'none';
this.onmouseout = null;
}else {
target.onmouseout = function(event) {
event = event || window.event;
if(event.stopPropagation) {
event.stopPropagation();
}else {
event.cancelBubble = true;
}
}
}
}
div.style.display = 'block';
}

})();
</script>
街头小贩 2009-12-26
  • 打赏
  • 举报
回复
[Quote=引用 6 楼 click_me 的回复:]
楼上的两位 误解楼主了.. 你们没注意 主要的问题是.. 鼠标移开DIV隐藏 但可以点击链接这个方面
这才是主要 呵呵
[/Quote]
VS
[Quote=引用楼主 daqi2010 的回复:]
当点击按钮,层显示,并且可以操作层里面的相关链接。当鼠标移开层后,层自动隐藏。
[/Quote]
daqi2010 2009-12-26
  • 打赏
  • 举报
回复
用了。鼠标移到DIV上就消失了。DIV里面有按钮事件,用ONBLUR也不行
街头小贩 2009-12-26
  • 打赏
  • 举报
回复

<!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=gb2312" />
<title>无标题文档</title>
</head>

<body>
<div id="MYCRM" style="display:none;width:100px;height:100px;border:1px solid #ddd;">
this is a layer

</div>
<input type="button" id="myinfo" value="myinfo" />
<script type="text/javascript">
document.getElementById('myinfo').onclick=function(){
var tm=document.getElementById('MYCRM');
tm.style.display='block';
tm.onmouseout=function(){
this.style.display='none';
}
}

</script>
</body>
</html>

Click_Me 2009-12-26
  • 打赏
  • 举报
回复

楼上的两位 误解楼主了.. 你们没注意 主要的问题是.. 鼠标移开DIV隐藏 但可以点击链接这个方面
这才是主要 呵呵
街头小贩 2009-12-26
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 daqi2010 的回复:]
有一层 DIV ID=MYCRM
有一按钮: ID=myinfo
要实现:
当点击按钮,层显示,并且可以操作层里面的相关按钮。当鼠标移开层后,层自动隐藏。
谢谢各位了
[/Quote]
兄弟你不能自已也动动手!
街头小贩 2009-12-26
  • 打赏
  • 举报
回复
<button id='btn1' .... />
<script type='text/javascript'>
document.getElementById('btn1').onclick=function(){

getElementById('div').style.display='block'; //你要显示的层div
}
真哥哥 2009-12-26
  • 打赏
  • 举报
回复
当点击时document.getElementById('id').style.display="";
当鼠标离开时:$("#id").bind("mouseleave", function(){
menu = document.all.itemopen//itemopen是id
menu.style.display = "none"
});
daqi2010 2009-12-26
  • 打赏
  • 举报
回复
有一层 DIV ID=MYCRM
有一按钮: ID=myinfo
要实现:
当点击按钮,层显示,并且可以操作层里面的相关按钮。当鼠标移开层后,层自动隐藏。
谢谢各位了
街头小贩 2009-12-26
  • 打赏
  • 举报
回复
getElementById('div').style.display='hidden' //隐藏
getElementById('div').style.display='block' //打开

发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2009-12-26 10:02
社区公告
暂无公告