การแจ้งเตือนแบบฟอร์มทั่วไปจะครอบครองตำแหน่งของแบบฟอร์มเสมอทำให้แบบฟอร์มยาวขึ้นหรือกว้างขึ้นส่งผลกระทบต่อเค้าโครง แต่ปัญหานี้สามารถแก้ไขได้หากกล่องพรอมต์ลอยอยู่ถัดจากเนื้อหาที่ต้องการเช่นกล่องโต้ตอบ
HTML และสไตล์สร้างแบบฟอร์มก่อน
<div id = form-block> <h1> ลงทะเบียน </h1> <ฟอร์ม id = รูปแบบรูปแบบคลาส = center-block> <div> <อินพุต ID = คลาสอีเมล = ตัวควบคุมแบบฟอร์มควบคุม = อีเมล> </div> <div> <อินพุต ID = vrf class = placeolder-form-Control
จากนั้นเราต้องออกแบบกล่องโต้ตอบ
อาจเป็นอย่างนั้นประกอบด้วยรูปสามเหลี่ยมและสี่เหลี่ยมผืนผ้า
#tips {padding-top: 6px; z-index: 9999; /*กดการสนทนาเพื่อหลีกเลี่ยงการถูกบดบังด้วยองค์ประกอบอื่น ๆ*/ ตำแหน่ง: แก้ไข; ความกว้าง: 1000px; } #ฟอร์มเคล็ดลับ {พื้นหลังสี: ดำ; สี: #ffffff; Padding: 0 6px; ตำแหน่ง: สัมบูรณ์; } #triangle {border: 10px solid; สีชายแดน: โปร่งใสสีดำโปร่งใส } <div id = levert> <label id = triangle> </label> <label id = form-alert> นี่คือพรอมต์ </label> </div>รูปสามเหลี่ยมเกิดขึ้นได้อย่างไร? อ้างถึงประสบการณ์นี้
การใช้งาน JSหน้าเสร็จแล้วและตอนนี้เราต้องการฟังก์ชั่นเพื่อเปลี่ยนเนื้อหาและตำแหน่งของกล่องโต้ตอบ
TIPS const = document.getElementById (เคล็ดลับ); // msg เป็นข้อมูลแจ้ง, obj คือองค์ประกอบที่ต้องได้รับการแจ้งเตือนฟังก์ชั่น showtips (msg, obj) {tips.style.display = block; // แสดงข้อมูลที่ซ่อนอยู่ // แสดงมันอยู่ด้านหลังองค์ประกอบดังนั้นเพิ่มความสูง var กว้าง = domrect.y; tips.style.top = ความสูง+px; tips.style.left = width+px; document.getElementById (รูปแบบเคล็ดลับ) .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 = ../css/bootstrap.css> <styles> body, html มาร์จิ้น: 0; Padding: 0; ความกว้าง: 100%; ความสูง: 100%; } Body *{ช่วงการเปลี่ยนภาพ: 500ms; } #Form-Block {Text-Align: Center; ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ซ้าย: 50%; ความกว้าง: 500px; ความสูง: 200px; พื้นหลังสี: #F1F2F6; แปลง: แปล (-50%) translatex (-50%); Box-Shadow: 0 0 10px #000000; } #ฟอร์มฟอร์ม {width: 70%; } #form-form> *{margin: 10px; } #การเตือนอีเมล {display: none; } #tips {padding-top: 6px; DS Z-Index: 9999; ตำแหน่ง: แก้ไข; ความกว้าง: 1000px; } #ฟอร์มเคล็ดลับ {พื้นหลังสี: ดำ; สี: #ffffff; Padding: 0 6px; ตำแหน่ง: สัมบูรณ์; } #triangle {border: 10px solid; สีชายแดน: โปร่งใสสีดำโปร่งใส } </style> </head> <body> <div id = เคล็ดลับ> <label id = สามเหลี่ยม> </label> <label id = form-tips> นี่คือพรอมต์ </label> </div> <div id = form-block> <h1> register </h1> placeHolder = อีเมล> <div id = คลาสการเตือนอีเมล = การเตือนฉลาก> โปรดป้อนที่อยู่อีเมลที่ถูกต้อง! </div> </div> <div> <อินพุต onfocus = showtips ('ข้อความทดสอบ', id = vrf class = รูปแบบการควบคุม </div> <!-<ปุ่มοnclick = ChangeFormHeight ('500')> ทดสอบ </button>-> <script> เคล็ดลับ const = document.getElementById (เคล็ดลับ); ฟังก์ชั่น showtips (msg, obj) {tips.style.display = block; var domrect = obj.getBoundingClientRect (); var width = domrect.x+obj.clientWidth; ความสูง var = domrect.y; tips.style.top = ความสูง+px; tips.style.left = width+px; document.getElementById (รูปแบบเคล็ดลับ) .innerhtml = msg; obj.onblur = function () {tips.style.display = ไม่มี; - window.onresize = function (ev) {showtips (msg, obj); }} </script> </body> </html> สรุปข้างต้นคือรหัสการใช้งานของฟังก์ชั่นกล่องพรอมต์ลอยน้ำ HTML ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!
หากคุณคิดว่าบทความนี้มีประโยชน์สำหรับคุณโปรดพิมพ์ซ้ำ โปรดระบุแหล่งที่มาขอบคุณ!