jquery 弹出层实现代码

jQuery.fn.selectItem = function(targetId) { 
var _seft = this; 
var targetId = $(targetId); 
this.toggle( 
function() { 
var A_top = $(this).offset().top + $(this).outerHeight(true); // 1 
var A_left = $(this).offset().left; 
targetId.bgiframe(); 
targetId.show().css({ "position": "absolute", "top": A_top + "px", "left": A_left + "px" }); 
} 
, function() { 
targetId.hide(); 
} 
); 
targetId.find("#selectItemClose").click(function() { 
targetId.hide(); 
}); 
targetId.find("#selectSub :checkbox").click(function() { 
targetId.find(":checkbox").attr("checked", false); 
$(this).attr("checked", true); 
_seft.val($(this).val()); 
targetId.hide(); 
}); 
$(document).click(function(event) { 
if (event.target.id != _seft.selector.substring(1)) { 
targetId.hide(); 
} 
}); 
targetId.click(function(e) { 
e.stopPropagation(); 
}); 
return this; 
} 
 
HTML代码： 
 代码如下:

<input type="text" id="txtCompetencies" value="All" readonly="readonly"/> 
<div id="selectCompetencies"> 
<table> 
<tbody> 
<tr><td><input type="checkbox" />All</td></tr> 
<tr><td><input type="checkbox" />Confidence</td></tr> 
</tbody> 
</table> 
</div> 
 
css样式： 
 代码如下:

/* pop div begin */ 
.selectItemcont{padding:8px;} 
.selectItemtit{line-height:20px;height:20px;margin:1px;padding-left:12px;} 
.bgc_ccc{background:#E88E22;} 
.selectItemleft{float:left;margin:0px;padding:0px;font-size:12px;font-weight:bold;color:#fff;} 
.selectItemright{float:right;cursor:pointer;color:#fff;} 
.selectItemcls{clear:both;font-size:0px;height:0px;overflow:hidden;} 
.selectItemhidden{display:none;} 
#selectCompetencies 
{ 
display:none; 
background:#FFF; 
position:absolute; 
top:0px; 
left:center; 
border:1px solid #000; 
overflow-x:hidden; 
overflow-y:auto; 
width:250px; 
z-index:1000; 
max-height:200px; 
} 
/* pop div end */ 
 
JavaScript代码： 
 代码如下:

$("#txtCompetencies").selectItem("#selectCompetencies"); 
 
实现点击文本框，在其正下方弹出一个新的层，再次点击的时候，隐藏层。 
后面的话，我会把这个插件继续完善的~~~ O(∩_∩)O...