コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jqueryポップアップレイヤーの実装 code_jquery

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

WBOY
リリース： 2016-05-16 18:42:54
オリジナル
1245 人が閲覧しました

分析とオンライン参照の後、ついに理解できました~~
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...
関連ラベル：
jquery ポップアップレイヤー
ソース：php.cn
前の記事：DOM スクリプトの兄弟ノード プログラミング_JavaScript スキル 次の記事：JavaScript GUID ジェネレーターの実装コード_JavaScript スキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...
から 2024-04-05 09:26:49
0
1
1418
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
から 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
から 2024-04-04 12:53:48
0
1
303
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート