Jquery pop-up layer implementation code _ jquery

I encountered a problem in the project. I thought it was the effect of using dropdownlist. After I click the text box, a layer pops up at the bottom of it, there are multiple options to select. It looks like jQuery. datepicker. After analysis, the online reference is finally completed ~~
JQuery plug-in code:

The Code is as follows:

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.tar get. id! = _ Seft. selector. substring (1 )){
TargetId. hide ();
}
});
TargetId. click (function (e ){
E. stopPropagation ();
});
Return this;
}

HTML code:

The Code is as follows:

All

Confidence

Css style:

The Code is as follows:

/* Pop p 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 p end */

JavaScript code:

The Code is as follows:

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

Click the text box to bring up a new layer at the bottom. When you click it again, the layer is hidden.
Later, I will continue to improve this plug-in ~~~ O (partition _ partition) O...