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;

　　}

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

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

　　$("#txtCompetencies").selectItem("#selectCompetencies");