如何显示和隐藏层，谢谢各位？

daqi2010 2009-12-26 10:02:36

有一层 DIV ID=MYCRM
有一按钮： ID=myinfo
要实现：
当点击按钮，层显示，并且可以操作层里面的相关链接。当鼠标移开层后，层自动隐藏。
谢谢各位了

...全文

117 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

dandande 2009-12-26

打赏
举报

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