信鸽网

基于jQuery实现点击弹出层实例代码

  作者：bea

jquery实现点击链接弹出层效果：本例实现的主要原理：jquery操作DOM元素。对层样式的设置。将display:设置为none;让层隐藏； 代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="" /><title>子选择器</title><style typ

jquery实现点击链接弹出层效果：本例实现的主要原理：jquery操作DOM元素。对层样式的设置。将display:设置为none;让层隐藏；


代码实例如下:




<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="" />

<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>


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


本段代码简单易懂，写的不好还请各位大侠见谅，希望本文分享能够给大家带来帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: