フォーム JS ポップアッププロンプト効果 code_form 効果-jsチュートリアル-php.cn

HTML

コードをコピー コードは次のとおりです: ; /form>

ページ内のスタイル

コードをコピーします コードは次のとおりです。 🎜> .focus { ボーダー: 1px ソリッド #FC0 !重要 背景: url(Admin/ Images/focus_bg.jpg) 繰り返し-x !重要; 色: #00F !重要; /*ヒント テキスト スタイル*/ #HintMsg { 幅: 271px; 位置: 絶対; 表示: なし; #HintTop { 高さ: 9px; .gif) いいえ -repeat; オーバーフロー: 非表示; #HintMsg .HintInfo { ボーダー左: 1px ソリッド #000; 🎜>border-right: 1px ソリッド #000; background: #FFFFE1; line-height: 1.5em; #HintInfo b { display:ブロック; margin-bottom: 6px; padding-left: 15px; background: 左中央 no-repeat; >行の高さ: 16px; #HintMsg .HintInfo b span { 表示: ブロック; テキストインデント: 背景: URL (Admin/Images/close.gif) 繰り返しなし; 幅: 12px; 高さ: 12px; カーソル: #HintFooter 🎜>{ 高さ: 22px; 背景: url(Admin/Images/hintbg2.gif) 繰り返しなし;

キー JS

コードをコピー

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

$(function() { $(".input ,.login_input,.textarea").focus(function() { $(this).addClass("focus"); }).blur(function() { $(this).removeClass("focus"); }); //入力ボックスのプロンプト、HintTitle、HintInfo プロパティを含むオブジェクトを取得します $("[HintTitle],[HintInfo]) ").focus(function(event) { $("*").stop(); //実行中のアニメーションをすべて停止します $("#HintMsg").remove(); //最初にクリアしますエラーの繰り返しを防ぐ var HintHtml = " " $(this).attr("HintTitle") " " $(this).attr("HintInfo") " "; //表示内容を設定 var offset = $(this).offset(); //イベントオブジェクトの位置を取得 $("body").append(HintHtml) ); //ノードを追加 $("#HintMsg").fadeTo(0, 0.85); //オブジェクトの透明度 var HintHeight = $("#HintMsg").height();コンテナの高さを取得します $( "#HintMsg").css({ "top": offset.top - HintHeight "px", "left": offset.left "px" }).fadeIn(500); 🎜>}).blur(function(event) { $("#HintMsg").remove(); //UL }) }); 🎜> レンダリング:

上記のコンテンツはダウンロード Web サイトから取得したものですが、具体的な名前は忘れられています...参照のみを目的としています

フォーム JS ポップアップ プロンプト効果 code_form 効果

フォーム JS ポップアッププロンプト効果 code_form 効果