你的位置:首页 > Java教程

[Java教程]jQuery点击显示弹出层实例代码


jQuery点击显示弹出层实例代码:
介绍一个最为简单的实例代码,就是点击一个指定的地方的时候,能够显示一个隐藏的层,再点击其他地方可以将此层隐藏。
代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>子选择器-蚂蚁部落</title><style type="text/css">#choice_list_district{ height:50px;}#tab td{ cursor:pointer;}#divobj{ position:absolute;  width:200px;  height:200px;  background:blue;  border:1px solid block;  display:none;  z-index:9999;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function (){  $("#choice_list_district a").click(function(e){   if($("#divobj").css("display")=="none"){    e.stopPropagation();    var offset=$(e.target).offset();    $("#divobj").css({top:offset.top+$(e.target).height()+"px",left:offset.left});    $("#divobj").show();   }   else{    $("#divobj").hide();   }  });  $(document).click(function(event){   $("#divobj").hide();  }); }); </script></head><body><form id="form1" runat="server"> <div>  <div id="choice_list_district"> <a href="#">出来层</a> </div>  <div id="divobj"></div> </div></form></body></html>

以上代码中,点击链接可以弹出隐藏的层,再点击任何地方就可以隐藏此层。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9298

更多内容可以参阅:http://www.softwhy.com/jquery/