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

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 のサンプル コード

推薦する

CSS の複雑なセレクターと CSS のフォントスタイルと色属性の詳細な説明

これまでに CSS の基本的なセレクターをいくつか学習しましたが、今日は CSS の複雑なセレクター...

Vue が DingTalk の出勤カレンダーを実装

この記事では、DingTalkの勤怠カレンダーを実装するためのVueの具体的なコードを参考までに共有...

テーブルはセルとimg画像を結合してtd HTML全体を埋めます

ソースコード(一部のクラスは削除されています):コードをコピーコードは次のとおりです。 <テー...

CSSをインポートする方法は何ですか?linkと@importの違いは何ですか?選択方法

Taobao のウェブページはインポートを使用していますが、多くのウェブサイトはリンクを使用していま...

要素 UI に基づいてクエリ コンポーネントを段階的にカプセル化する方法

目次関数基本的なクエリ関数クエリ条件の初期化ページのレンダリングクエリと表示の最適化をさらに強化プル...

CentOS7.6 システムで yum を使用して lnmp 環境を構成する方法

1. インストールバージョンの詳細 サーバー: MariaDB サーバーバージョン: 5.5.60-...

Linux でファイルのユーザーとグループを変更する方法

Linux では、ファイルが作成されると、そのファイルの所有者はファイルを作成したユーザーになります...

docker-compose を使用して Clickhouse をすばやくデプロイする方法のチュートリアル

ClickHouse は、オープンソースの列指向 DBMS (Yandex によって開発) です。 ...

MySQLデータベースのbinlogクリーンアップコマンドの詳細な説明

概要今日は主に、MySQL データベースから binlog ログを正しく削除する方法を紹介します。ロ...

Vue は Tencent Map を統合して API を実装します (デモ付き)

目次執筆の背景プロジェクトの説明事前準備注記執筆の背景以前のプロジェクトではTencent Maps...

Baidu 入力メソッドが API を公開、自由に移植して使用できると主張

百度入力方式の担当者は、百度入力方式のオープンAPIの最大の利点は操作が便利であることであり、プラッ...

表内のコンテンツオーバーフローのレイアウト方法について

コンテンツオーバーフローとは何ですか?実際、テキストが大量にある場合、コンテンツ領域がそれだけの長さ...

MySQLで重複行を削除する方法

SQL文 /* MySQL で重複行を削除するいくつかの方法 ---Chu Minfei ---20...

MySQL Shell import_tableデータインポートの実装

目次1. import_tableの紹介2. データのロードとテーブル関数のインポートの例2.1 L...

HTML の相対パスと絶対パスの違いの分析

HTML 初心者は、ファイルを正しく参照する方法という問題によく遭遇します。たとえば、HTML ペー...