HTMLフローティングプロンプトボックス機能の実装コード

一般的なフォームプロンプトは常にフォームのスペースを占有し、フォームが長くなったり広くなったりしてレイアウトに影響しますが、プロンプトボックスをダイアログボックスのように必要なコンテンツの横にフロート表示すれば、この問題は解決できます。

HTMLとスタイル

まずフォームを作る

<div id="フォームブロック">
        <h1>登録</h1>
        <フォームid="フォームフォーム" クラス="センターブロック">
            <div>
                <input id="email" class="form-control" placeholder="メールアドレス">
            </div>
            <div>
                <input id="vrf" class="form-control" placeholder="検証コード">
        </フォーム>
    </div>
</div>

次にダイアログボックスを設計する必要があります

ヒントボックス

だいたいこんな感じです。三角形と長方形で構成されています。

  #ヒント{
            パディング上部: 6px;
            zインデックス: 9999;
            /*会話が他の要素に邪魔されないように上部に固定します*/
            位置: 固定;
            幅: 1000ピクセル;
        }
        #フォームのヒント{
            背景色: 黒;
            色: #ffffff;
            パディング: 0 6px;
            位置: 絶対;
        }
        ＃三角形{
            境界線:10px実線;
            border-color: 透明 黒 透明 透明;
        }

<div id="変更">
    <label id="三角形"></label>
    <label id="form-alert">これはリマインダーです</label>
</div>

三角形はどうやってできたのですか?この経験を参考にしてください

フローティングを実現するjs

ページの準備はできました。次に、ダイアログボックスの内容と位置を変更する関数が必要です。

const TIPS = document.getElementById("ヒント");
//msgはプロンプトメッセージ、objはプロンプトが必要な要素です 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 = 高さ+"px";
        TIPS.style.left = width+"px";
        document.getElementById("form-tips").innerHTML = msg; //ダイアログテキストを変更する obj.onblur = function () {
            TIPS.style.display = "none"; //要素がフォーカスを失ったときにダイアログ ボックスを非表示にします //ここではテーブルで使用するため、defocus メソッドを使用します。必要に応じて変更します};
        window.onresize = 関数 (ev) {
            showTips(msg, obj); //ウィンドウのサイズが変わったときにダイアログの位置を再計算します}
    }

レンダリング

ここに画像の説明を挿入

完全なコード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <link rel="スタイルシート" href="../static/css/bootstrap.css">
    <スタイル>
        本文、html{
            背景色: #70a1ff;
            マージン: 0;
            パディング: 0;
            幅: 100%;
            高さ: 100%;
        }
        体 *{
            遷移期間: 500ms;
        }
        #フォームブロック{
            テキスト配置: 中央;
            位置: 絶対;
            上位: 50%;
            左: 50%;
            幅: 500ピクセル;
            高さ: 200px;
            背景色: #f1f2f6;
            変換: translateY(-50%) translateX(-50%);
            ボックスシャドウ: 0 0 10px #000000;
        }
        #フォームフォーム{
            幅: 70%;
        }

        #フォームフォーム > *{
            マージン: 10px;
        }

        #電子メール警告{
            表示: なし;
        }
        #ヒント{
            パディングトップ: 6px; ds
            zインデックス: 9999;
            位置: 固定;
            幅: 1000ピクセル;
        }
        #フォームのヒント{
            背景色: 黒;
            色: #ffffff;
            パディング: 0 6px;
            位置: 絶対;
        }
        ＃三角形{
            境界線:10px実線;
            border-color: 透明 黒 透明 透明;
        }
    </スタイル>
</head>
<本文>
<div id="ヒント">
    <label id="三角形"></label>
    <label id="form-tips">これはヒントです</label>
</div>
    <div id="フォームブロック">
        <h1>登録</h1>
        <フォームid="フォームフォーム" クラス="センターブロック">
            <div>
                <input onfocus="showTips('メールのヒント',this)" id="email" class="form-control" placeholder="メール">
                <div id="email-warning" class="label-warning">正しいメールアドレスを入力してください。</div>
            </div>
            <div>
                <input onfocus="showTips('テストテキスト', this)" id="vrf" class="form-control" placeholder="検証コード">
                <div id="vrf-warning" class="label-warning hidden">有効なメールアドレスを入力してください。</div>
            </div>
        </フォーム>
    </div>
<!-- <button click="changeFormHeight('500')">テスト</button>-->
<スクリプト>
    const TIPS = document.getElementById("ヒント");
    関数 showTips(msg, obj) {
        TIPS.style.display = "ブロック";
        var domRect = obj.getBoundingClientRect();
        var 幅 = domRect.x + obj.clientWidth;
        var 高さ = domRect.y;
        TIPS.style.top = 高さ+"px";
        TIPS.style.left = width+"px";
        document.getElementById("フォームヒント").innerHTML = msg;
        obj.onblur = 関数 () {
            TIPS.style.display = "なし";
        };
        window.onresize = 関数 (ev) {
            ヒントを表示します(msg, obj);
        }
    }
</スクリプト>
</本文>
</html>

要約する

上記はエディターが導入した HTML フローティングプロンプトボックス機能の実装コードです。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残してください。エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: レスポンシブデザインについて知っておくべきこと

>>: スクロールバーの美化効果を実現するための CSS3 のサンプルコード