一般的なフォームプロンプトは常にフォームの位置を占め、フォームをより長くまたは広くし、レイアウトに影響を与えますが、この問題は、ダイアログボックスのように必要なコンテンツの隣にプロンプトボックスが浮かんでいる場合に解決できます。
HTMLとスタイル最初にフォームを作成します
<div id = form-block> <h1> register </h1> <form id = form-form class = center-block> <div> <input id = email class = form-control placeholder = email> </div> <div> <input id = vrf class = form-control placeholder = verification code> </form> </div> </div>
次に、ダイアログボックスを設計する必要があります
おそらく、三角形と長方形で構成されています。
#tips {padding-top：6px; Z-Index：9999; /*会話を押して、他の要素によって不明瞭にされないようにします*/位置：修正。幅：1000px; }＃form-tips {background-color：black;色：#ffffff;パディング：0 6px;位置：絶対; } #triangle {border：10px solid;境界線：透明な黒の透明な透明。 } <div id = alter> <label id = triangle> </label> <label id = form-alert>これはプロンプト</label> </div>です三角形はどのようにして生まれましたか？この経験を参照してください
JS実装フローティングページはすでに完了しているため、ダイアログボックスのコンテンツと位置を変更する機能が必要です。
const tips = document.getElementById（TIPS）; // MSGはプロンプト情報です。OBJは、function showtips（msg、obj）{tips.style.display = block; //非表示ダイアログdomrect = obj.getboundingclientRect（）; //要素の後ろに表示するので、広いvar height = domrect.yを追加します。 tips.style.top = height+px; tips.style.left = width+px; document.getElementById（form-tips）.innerhtml = msg; //ダイアログテキストを変更しますobj.onblur = function（）{tips.style.display = none; //ダイアログボックスを焦点を合わせていないとき//ここではテーブルで使用するので、必要に応じてフォーカスを使用して変更します}; window.onresize = function（ev）{showtips（msg、obj）; //ウィンドウがサイズが変更されたときにダイアログボックスの位置を再計算}}複製図
完全なコードd
<！doctype html> <html lang = en> <head> <meta charset = utf-8> <title> title> </title> <link rel = styleSheet href = ../static/css/bootstrap.css> <style> body、html {background-color：＃70a1ff;マージン：0;パディング：0;幅：100％;高さ：100％; } body *{transition-duration：500ms; }＃form-block {text-align：center;位置：絶対;トップ：50％;左：50％;幅：500px;高さ：200px;バックグラウンドカラー：＃f1f2f6;変換：translatey（-50％）translatex（-50％）; Box-Shadow：0 0 10px＃000000; }＃form-form {width：70％; }＃form-form> *{マージン：10px; }＃email-warning {display：none; } #tips {padding-top：6px; DS Z-Index：9999;位置：修正;幅：1000px; }＃form-tips {background-color：black;色：#ffffff;パディング：0 6px;位置：絶対; } #triangle {border：10px solid;境界線：透明な黒の透明な透明。 } </style> </head> <body> <div id = tips> <label id = triangle> </label> <label id = form-tips>これはプロンプトです</label> </div> <div id = form-block> <h1> <form id = form id = form-form class = center-block> <input = showtips（ 'email class> film = emarprol> <入力= form> <div id = email-warning class = label-warning>正しいメールアドレスを入力してください！</div> </div> <div> <input onfocus = showtips（ 'test text'、this）id = vrf class = form-control placehorder = verification> <div id = vrf-warning class = labe-warning warnning dided>正しいメールアドレス！ οnclick= changeformheight（ '500'）> test </button> - > <script> const tips = document.getElementById（TIPS）; function showtips（msg、obj）{tips.style.display = block; var domrect = obj.getBoundingClientRect（）; var width = domrect.x+obj.clientwidth; var height = domrect.y; tips.style.top = height+px; tips.style.left = width+px; document.getElementById（form-tips）.innerhtml = msg; obj.onblur = function（）{tips.style.display = none; }; window.onresize = function（ev）{showtips（msg、obj）; }} </script> </body> </html>要約します上記は、編集者が紹介したHTMLフローティングプロンプトボックス関数の実装コードです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！
この記事が役立つと思われる場合は、再版してください。ソースを示してください、ありがとう！