การดาวน์โหลดเว็บไซต์อย่างเป็นทางการของ Bootstrap: http://v3.bootcss.com/
วันนี้ฉันจะแบ่งปันปัญหาที่พบในการใช้เฟรมเวิร์ก Bootstrap มีการใช้หน้าต่างป๊อปอัพจำนวนมาก (Modals) ระหว่างการพัฒนาผลิตภัณฑ์
เมื่อฉันเริ่มเรียนรู้ที่จะใช้มันครั้งแรกฉันพบว่าหน้าต่างนี้ไม่สามารถอยู่กึ่งกลางในแนวตั้งได้เสมอและไม่สามารถลากได้ หลังจากดูคำแนะนำในการใช้งานฉันไม่ได้ตั้งค่าแอตทริบิวต์และวิธีการมากเกินไปดังนั้นฉันจึงใช้วิธีการเริ่มต้น เมื่อเร็ว ๆ นี้ลูกค้าได้ทำการร้องขอ: หน้าต่างป๊อปอัพสามารถอยู่กึ่งกลางได้หรือไม่? เนื่องจากหน้าต่างเล็ก ๆ บางบานอยู่ด้านบนหน้าโดยรวมจึงไม่สมดุลและหน้าต่างที่ใหญ่กว่ายังคงเป็นที่ยอมรับ
เนื่องจากฉันไม่คุ้นเคยกับ bootstrap มาก่อนฉันจึงเริ่ม Baidu และ Google และพบว่ามีวิธีแก้ปัญหาเพียงไม่กี่อย่างดังนี้:
$ ("#mymodal"). modal (). css ({"margin -top": function () {return - ($ (นี่) .height () / 2);}});ที่อยู่อ้างอิง: http://www.g2w.me/2012/06/bootstrap-modal-shown-in-the-center/
ฉันลองวิธีนี้ด้วยตัวเอง แต่มันก็ไม่ได้อยู่กึ่งกลางอย่างสมบูรณ์ หากขนาดของหน้าต่างแตกต่างกันค่าส่วนบนที่แสดงจะเปลี่ยนไปทุกครั้งและจะมีแถบเลื่อนบนชั้นปกซึ่งไม่ได้ดูดี
ฉันยังลองหลายวิธีในการเปลี่ยนแปลงพวกเขา แต่มันก็ไม่ได้มองโลกในแง่ดี ฉันพบว่าฉันไม่สามารถรับค่า $ (นี้) .Height () ก่อนที่หน้าต่างจะโผล่ขึ้นมา ฉันคิดว่าฉันใช้ ($ (หน้าต่าง) .Height ()-$ (นี่) .Height ())/2 แต่ฉันพบว่ามันยังไม่สามารถทำได้
ในที่สุดฉันสามารถศึกษาซอร์สโค้ดเท่านั้นและพบว่าสามารถเพิ่มรหัสต่อไปนี้หลังจาก 900 บรรทัดของไฟล์ bootstrap.js เพื่อให้ได้ศูนย์กลางในแนวตั้ง
นั่น. $ element.children (). eq (0) .css ("ตำแหน่ง", "สัมบูรณ์"). css ({"มาร์จิ้น": "0px", "top": ฟังก์ชั่น () {return (that. $ element.height () - {reking: px " (นั่น. $ element.width () - นั่น. $ element.children (). eq (0) .width ()) / 2 + "px";}});รหัสหน้ามีดังนี้:
<div> <button data-toggle = "modal" data-target = "#mymodal"> เปิดตัวอย่างโมดอล </button> <!-modal-> <div id = "mymodal" tabindex = "-1" role = "dive-labelledby =" MyModallabel Aria-hidden = "true"> × </pution> <h4 id = "mymodallabel"> modal title </h4> </div> <div> ... </div> <div> <div> <div> <button type = "ปุ่ม" data-dismiss = "modal"> ปิด </button> <button type = "ปุ่ม"> /.modal-dialog-> </div> <!-/.modal-> </div>
การเรนเดอร์มีดังนี้:
ด้านบนเป็นรหัสตัวอย่างของศูนย์กลางแนวตั้งของ Bootstrap Modal Box (Modal) ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!