일반 양식 프롬프트는 항상 형태의 위치를 차지하여 형태가 더 길거나 더 넓어 레이아웃에 영향을 미치지 만, 프롬프트 상자가 대화 상자와 같이 필요한 컨텐츠 옆에 떠 다니면이 문제를 해결할 수 있습니다.
HTML 및 스타일먼저 양식을 만드십시오
<div id = form-block> <h1> 레지스터 </h1> <form id = form-form class = center-block> <div> <입력 ID = 이메일 클래스 = Form-Control Pictholder = email> </div> <div> <입력 ID = VRF 클래스 = Form-Control 자리 표시 자 = 검증 코드> </div> </div>
그런 다음 대화 상자를 설계해야합니다
아마도 삼각형과 사각형으로 구성된 것일 수 있습니다.
#TIPS {Padding-Top : 6px; Z- 인덱스 : 9999; /*다른 요소들에 의해 가려지는 것을 피하려면 대화를 눌러*/ 위치 : 고정; 너비 : 1000px; } #form-tips {배경색 : 검은 색; 색상 : #ffffff; 패딩 : 0 6px; 위치 : 절대; } #triangle {테두리 : 10px 고체; 국경 색 : 투명한 검은 색 투명 투명; } <div id = alter> <label id = triangle> </label> <label id = form-alert> 이것은 프롬프트 </label> </div>입니다삼각형은 어떻게 생겼습니까? 이 경험을 참조하십시오
JS 구현 부동페이지가 이미 완료되었으며 이제 대화 상자의 내용과 위치를 변경하는 기능이 필요합니다.
const tips = document.getElementById (tips); // msg는 프롬프트 정보입니다. OBJ는 기능 쇼핑 (msg, obj) {tips.style.display = block; // 숨겨진 대화 상자 표시 var domrect = obj.getBoundingClientRect (); // 요소 뒤에 표시하므로 넓은 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); // 창이 크기가 변경 될 때 대화 상자 위치를 다시 계산합니다}}}복제 다이어그램
완전한 코드 d
<! docType html> <html lang = en> <head> <meta charset = utf-8> <title> 제목 </title> <link rel = stylesheet href = ../static/css/bootstrap.csss> <styt> body, html {background-color : #70a1ff; 여백 : 0; 패딩 : 0; 너비 : 100%; 높이 : 100%; } body *{전환 기간 : 500ms; } #form-block {텍스트-알림 : 센터; 위치 : 절대; 상단 : 50%; 왼쪽 : 50%; 너비 : 500px; 높이 : 200px; 배경색 : #f1f2f6; 변환 : Translatey (-50%) Translatex (-50%); Box-Shadow : 0 0 10PX #000000; } #form-form {너비 : 70%; } #form-form> *{마진 : 10px; } #이메일 경고 {디스플레이 : 없음; } #tips {Padding-top : 6px; DS Z- 인덱스 : 9999; 위치 : 고정; 너비 : 1000px; } #form-tips {배경색 : 검은 색; 색상 : #ffffff; 패딩 : 0 6px; 위치 : 절대; } #triangle {테두리 : 10px 고체; 국경 색 : 투명한 검은 색 투명 투명; }. 자리 표시기 = 이메일> <div id = 이메일 경고 클래스 = 라벨 관광> 올바른 이메일 주소를 입력하십시오! </div> </div> <div> <showtips = showtips ( 'test text', this) id = vrf class = form-control placeholder = verification code> <div = vrf-warning classmen hidden> </div> </div. </div> <!-<버튼 οnclick = changeformHeight ( '500')> 테스트 </button>-> <cript> const tips = document.getElementById (tips); 함수 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 플로팅 프롬프트 박스 기능의 구현 코드입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!
이 기사가 도움이된다고 생각되면 다시 인쇄하십시오. 소스를 표시하십시오. 감사합니다!