BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

htmlフローティングアラートボックス機能実装

2022-01-07 01:32:01

通常のフォームヒントは常にフォームの位置を占め、フォームの横が長くなったり広くなったりしてレイアウトに影響を与えますが、この問題はヒントボックスをダイアログボックスのように目的のコンテンツの横にフロートさせることで解決することができます。 その

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="captcha">
        </form>
    </div>
</div>

次に、ダイアログボックスをデザインする必要があります。

三角形と四角形で構成された、そんな感じです。 

  #tips{
            padding-top: 6px;
            z-index: 9999;
            /* Make the dialog top so that it is not obscured by other elements*            position: fixed;
            width: 1000px;
        }
        #form-tips{
            background-color: black;
            color: #ffffff;
            padding: 0 6px;
            position: absolute;
        }
        #triangle{
            border:10px solid;
            border-color: transparent black transparent transparent;
        }

<div id="alter">
    <label id="triangle"></label>
    <label id="form-alert">This is a prompt</label>
</div>

三角形はどのようにして生まれたのでしょうか？この体験談を参考にする

js は float を実装しています。

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

const TIPS = document.getElementById("tips");
//msg is the tips message, obj is the element that needs tips
function showTips(msg, obj) {
        TIPS.style.display = "block";//Show the hidden dialog
        var domRect = obj.getBoundingClientRect();//Get the element's position information
        var width = domRect.x+obj.clientWidth; //shows behind the element, so add the width of the element
        var height = domRect.y;
        TIPS.style.top = height+"px";
        TIPS.style.left = width+"px";
        document.getElementById("form-tips").innerHTML = msg; //change dialog text
        obj.onblur = function () {
            TIPS.style.display = "none";//hide the dialog when the element is out of focus
            //I use out-of-focus here because I'm using it in a table, modify as needed
        };
        window.onresize = function (ev) {
            showTips(msg, obj);//recalculate dialog position when window changes size
        }
    }

レンダリング

フルコード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;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        body *{
            transition-duration: 500ms;
        }
        #form-block{
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 200px;
            background-color: #f1f2f6;
            transform: translateY(-50%) translateX(-50%);
            box-shadow: 0 0 10px #000000;
        }
        #form-form{
            width: 70%;
        }

        #form-form > *{
            margin: 10px;
        }

        #email-warning{
            display: none;
        }
        #tips{
            padding-top: 6px; ds
            z-index: 9999;
            position: fixed;
            width: 1000px;
        }
        #form-tips{
            background-color: black;
            color: #ffffff;
            padding: 0 6px;
            position: absolute;
        }
        #triangle{
            border:10px solid;
            border-color: transparent black transparent transparent;
        }
    </style>
</head>
<body>
<div id="tips">
    <label id="triangle"></label>
    <label id="form-tips">This is a tip</label>
</div>
    <div id="form-block">
        <h1>register</h1>
        <form id="form-form" class="center-block">
            <div>
                <input onfocus="showTips('Tips for email',this)" id="email" class="form-control" placeholder="email" ;>
                <div id="email-warning" class="label-warning"> Please enter the correct email address! </div>
            </div>
            <div>
                <input onfocus="showTips('Test Text', this)" id="vrf" class="form-control" placeholder="Captcha">
                <div id="vrf-warning" class="label-warning hidden"> Please enter the correct email address! </div>
            </div>
        </form>
    </div>
<! -- <button ο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フローティングプロンプトボックス機能コードの小さな紹介です、私はそれがあなたの助けになることを願っています、あなたが何か質問がある場合は、私にメッセージを与えてください、私はタイムリーにあなたに返信されます。ここでまた、スクリプトハウスのウェブサイトを応援していただき、本当にありがとうございます!
この記事がお役に立つと思われる方は、出典を明記の上、ご自由に転載してください！ありがとうございました。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します