ผู้ที่ใช้ส่วนประกอบ Bootstrap Modal นั้นสับสน ทำไมกล่องป๊อปอัพที่ดีไม่สามารถอยู่กึ่งกลางในแนวตั้งได้? ฉันกำลังทำงานในโครงการ EIT เนื่องจากบางเฟรมเวิร์กในโครงการนี้เป็นไปตามกฎบางอย่างของ NTTDATA ฉันจึงใช้ bootstrap ฉันพบสิ่งนี้เป็นครั้งแรกและรู้สึกว่ามันขัดแย้งกันมากและฉันคิดว่ามันไม่ดี แต่เมื่อฉันใช้มันฉันรู้สึกว่ามันไม่แตกต่างจากกล่องป๊อปอัพอื่น ๆ เรื่องไร้สาระน้อยลงไปถึงจุดปัญหาของการตั้งตรงกลางของกล่องป๊อปอัพ bootstrap เป็นเพราะรูปแบบของกล่องป๊อปอัพที่ฉันได้รับนั้นไม่ได้เป็นศูนย์กลางในแนวตั้ง แต่ 10%อันดับแรก แต่หน้านั้นน่าขยะแขยงมาก
การแก้ปัญหามีดังนี้:
1. ใน CSS ค้นหา
.modal.fade.in {Top: 10%;}หากคุณปรับเปลี่ยนสไตล์นี้มันจะโอเค เนื่องจาก CSS เป็นทั่วโลกคุณยังสามารถกำหนดตำแหน่ง (ความสูง) ของโมดอลที่แน่นอนในหน้า วิธีนี้มีดังนี้:
<style>#mymodal-help {top: 300px;} </style>#mymodal-help เป็นรหัสโมดอลดังนั้นการตั้งค่าก็โอเค
2. ใน JS
ฉันใช้ bootstrap-modal.js (ถ้าฉันใช้ bootstrap.js หรือ bootstrap.min.js มันก็โอเค แต่ฉันต้องหาตำแหน่งที่สอดคล้องกัน)
พบใน JS (สีแดงเป็นวิธีที่ฉันเพิ่ม):
var left = ($ (document.body) .width () - นั่น. $ element.width ()) / 2; var top = ($ (document.body) .height () - นั่น. $ element.height ()) / 2; var scrolly = document.documentelement.scrolltop || document.body.scrolltop; // โซลูชัน scrollbar var top = (window.screen.height /4) + scrolly - 120; // scrollbar solution console.log (ซ้าย); นั่นคือ $ element .addclass ('in') .attr ('Aria-hidden', false) .css ({ซ้าย: ซ้าย, ด้านบน: ด้านบน: "0 auto"}); นั่น enforcefocus ()เมื่อพบแล้วเพิ่มสีแดงและมันจะโอเคเพื่อให้กล่องป๊อปอัพทั้งหมดจะอยู่กึ่งกลางในแนวตั้ง
ข้างต้นเป็นคำอธิบายโดยละเอียดเกี่ยวกับปัญหาและวิธีการแก้ปัญหาของการจัดกึ่งกลางแนวตั้งของ Bootstrap Pop-Up Box (Modal) ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!