jqueryポップアップレイヤーの実装 code_jquery

分析とオンライン参照の後、ついに理解できました~~
jQuery プラグイン コード:

コードをコピー コードは次のとおりです

jQuery.fn.selectItem = function(targetId) {
var _seft = this;
var targetId = $(targetId); 🎜>function() {
var A_top = $(this).offset().top $(this).outerHeight(true); // 1
var A_left = $(this).offset(); left;
targetId.bgiframe();
targetId.show().css({ "位置": "絶対", "上": 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") ("チェック済み"、false);
$(this).attr("チェック済み"、true);
_seft.val($(this).val()); ;
} );
$(document).click(function(event) {
if (event.target.id != _seft.selector.substring(1)) {
targetId. ();
}
});
targetId.click(e) {
e.stopPropagation();
});


HTML コード:

コードをコピー

コードは次のとおりです:

🎜> すべて

;input type="checkbox" / >Confidence

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;カーソル:ポインタ;カラー:#fff;} .selectItemcls{clear:both;font-size:0px;height:0px;overflow:hidden;}

.selectItemhidden{display:none;}

# selectCompetency
{
display:none ;
position:absolute;
left:center; ;
オーバーフロー-y:自動;
z-index:1000;
>/* Pop div end */


JavaScript コード:




コードをコピー


コードは次のとおりです


$(" #txtCompetency").selectItem("#selectCompetency");


テキスト ボックスをクリックすると、その下に新しいレイヤーがポップアップ表示されます。もう一度クリックすると、レイヤーが非表示になります。

今後もこのプラグインを改良していきます~~~O(∩_∩)O...

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。