jQuery點選顯示彈出層例項程式碼

螞蟻小編發表於2017-02-26
jQuery
介紹一個最為簡單的例項程式碼，就是點選一個指定的地方的時候，能夠顯示一個隱藏的層，再點選其他地方可以將此層隱藏。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!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>

以上程式碼中，點選連結可以彈出隱藏的層，再點選任何地方就可以隱藏此層。

相關文章