ستحتل مطالبات النموذج العام دائمًا موضع النموذج ، مما يجعل النموذج أطول أو أوسع ، مما يؤثر على التصميم ، ولكن يمكن حل هذه المشكلة إذا كان مربع المطالبة يطفو بجوار المحتوى المطلوب مثل مربع الحوار.
HTML والأنماطاصنع نموذجًا أولاً
<div id = form-block> <h1> سجل </h1> <form id = form-form class = center-block> <viv> <input id = email class = form-control leacholder = email> </viv> <div> <input id = vrf class = form-control alsholder = 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> </billy> <label id = form-alert> هذا موجه </label> </div>كيف جاء المثلث؟ الرجوع إلى هذه التجربة
JS تنفيذ العائمةتم بالفعل الصفحة ، والآن نحتاج إلى وظيفة لتغيير محتوى وموضع مربع الحوار.
const tips = document.getElementById (tips) ؛ // msg هي المعلومات المطالبة ، OBJ هو العنصر الذي يجب مطالبته بالوظيفة المعروضة (msg ، obj) {tips.style.display = block ؛ // أظهره خلف العنصر ، لذا أضف ارتفاع var الواسع = domrect.y ؛ TIPS.STYLE.TOP = الارتفاع+px ؛ TIPS.STYLE.LEFT = العرض+px ؛ document.getElementById (form-tips) .innerhtml = msg ؛ // قم بتغيير نص الحوار obj.onblur = function () {tips.style.display = none ؛ // إخفاء مربع الحوار عندما يكون العنصر خارج التركيز // لأنني استخدمه في جدول هنا ، أستخدمه خارج التركيز وأعدله حسب الحاجة} ؛ window.onresize = function (ev) {showtips (msg ، obj) ؛ // إعادة حساب موضع مربع الحوار عندما تتغير النافذة}}رسم تخطيطي للتكاثر
رمز كامل د
<! doctype html> <html lang = en> <head> <meta charset = utf-8> <title> العنوان </title> <link rel = stylesheet href = ../static/css/bootstrap.css> <style> body ، html {خلفية-ألوان: #70a1ff ؛ الهامش: 0 ؛ الحشو: 0 ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ } body *{transition-duration: 500ms ؛ } #form-block {text-align: center ؛ الموقف: مطلق ؛ أعلى: 50 ٪ ؛ اليسار: 50 ٪ ؛ العرض: 500 بكسل ؛ الارتفاع: 200 بكسل ؛ لون الخلفية: #f1f2f6 ؛ التحويل: Translatey (-50 ٪) Translatex (-50 ٪) ؛ box-shadow: 0 0 10px #000000 ؛ } #form-form {width: 70 ٪ ؛ } #form-form> *{margin: 10px ؛ } #elem-warnning {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> </billy> <label id = form-tips> هذا موجه </label> </div> <div id = form-block> <h1> register </h1> <form id = form-form class = center-splic> <vip> leacholder = email> <div id = empl-warning class = label-warning> الرجاء إدخال عنوان البريد الإلكتروني الصحيح! </div> </viv> <div> <input onfocus = showtips ('test text' ، this) id = vrf class = form-control ephod addrice = verifical ide id = vrf-warning class = warning warn. </viv> <!-<button οClick = ChangeFormheight ('500')> اختبار </button>-> <script> const tips = document.getElementById (tips) ؛ وظيفة العرض (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 = العرض+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!
إذا كنت تعتقد أن هذه المقالة مفيدة لك ، فيرجى إعادة طباعتها. يرجى الإشارة إلى المصدر ، شكرا لك!