เพิ่มการซ้อนทับขนาดเล็กลงในเนื้อหาหน้าเช่นเอฟเฟกต์บน iPad เพิ่มข้อมูลเพิ่มเติมลงในองค์ประกอบหน้า
การพึ่งพาปลั๊กอิน
กล่องป๊อปอัพขึ้นอยู่กับปลั๊กอินคำแนะนำเครื่องมือดังนั้นปลั๊กอินคำแนะนำเครื่องมือจะต้องโหลดก่อน
ฟังก์ชั่นการเลือกเพิ่มเติม
สำหรับการพิจารณาประสิทธิภาพ API ของคุณลักษณะข้อมูลของคำแนะนำเครื่องมือและส่วนประกอบป๊อปอัพจะถูกเพิ่มเข้ามาซึ่งหมายความว่าคุณต้องเริ่มต้นด้วยตัวเอง
จำเป็นต้องมีการตั้งค่าเพิ่มเติมเมื่อใช้กล่องป๊อปอัพในกลุ่มปุ่มและกลุ่มกล่องอินพุต
เมื่อมีการใช้กล่องพรอมต์ร่วมกับ. btn-group หรือ. input-Group คุณต้องระบุตัวเลือกคอนเทนเนอร์: 'body' (ดูเอกสารด้านล่าง) เพื่อหลีกเลี่ยงผลข้างเคียงที่ไม่พึงประสงค์ (ตัวอย่างเช่นเมื่อกล่องป๊อปอัพปรากฏขึ้น
เมื่อใช้กล่องป๊อปอัพในองค์ประกอบหน้าต้องห้ามคุณต้องเพิ่มองค์ประกอบพิเศษเพื่อห่อมัน
ในการเพิ่มกล่องป๊อปอัปลงในองค์ประกอบที่ปิดใช้งานหรือ. disabled ให้ห่อองค์ประกอบหน้าเว็บที่ต้องเพิ่มลงในกล่องป๊อปอัพใน <div> จากนั้นใช้กล่องป๊อปอัปกับองค์ประกอบ <div> นี้
1. กรณีคงที่
4 ตัวเลือกเสริม: การจัดเรียงด้านบนขวาล่างและซ้าย
ส่วนรหัส
.BS-Example {สีชายแดน: #DD; แนวชายแดน: 4px 4px 0 0; ความกว้างของชายแดน: 1px; Box-Shadow: ไม่มี; ขอบซ้าย: 0; มาร์จิ้น-ขวา: 0; สไตล์ชายแดน: ของแข็ง; } .BS-Example-Popover .Pover {ตำแหน่ง: ญาติ; แสดง: บล็อก; ลอย: ซ้าย; ความกว้าง: 240px; มาร์จิ้น: 20px; -<H1> 3. กล่องป๊อปอัพ </h1> <div> <div> <div> </div> <h3> Popover Top </h3> <div> <p> sed posuere consectetur est ที่ lobortis Aenean Eu Leo Quam Pellentesque Ornare sem lacinia quam venenatis vestibulum. </p> </div> </div> <div> <div> </div> <h3> popover ขวา </h3> <div> <p> Aenean Eu Leo Quam PELLENTESQUE ORNARE SEM LACINIA QUAM VENENATIS. </p> </div> <div> <div> </div> <h3> popover ขวา </h3> <p> <p> sed posuere consectetur est ที่ lobortis Aenean Eu Leo Quam PELLENTESQUE ORNARE SEM LACINIA QUAM VENENATIS VESTIBULUM. </p> </div> </div> <div> <div> </div> <h3> ด้านล่างของป๊อปโอเวอร์ </h3> <div> <p> Aenean Eu Leo Quam PELLENTESQUE ORNARE SEM LACINIA QUAM VENENATIS VESTIBULUM. </p> </div> </div> <div> <div> </div> <h3> popover ซ้าย </h3> <div> <p> Aenean Eu Leo Quam Pellentesque Ornare sem lacinia quam venenatis vestibulum. </p> </div> </div> </div> </div> </div>
ตัวอย่างเอฟเฟกต์
รหัสตัวอย่าง:
<a href = "JavaScript: void (0)" id = "a_pop" data-placement = "Bottom" data-content = "ลมและฝนเหมือนการใช้เวลาจับกับม้าขาว กำลังเบี่ยงเบนไปจากโลกทั้งใบลมและความสว่างของเกล็ดหิมะทำให้ผมสีขาวของเรา คุณเคยบอกว่าคุณไม่ควรแยกและอยู่ด้วยกันตลอดไปและตอนนี้ฉันต้องการถามว่าคุณเป็นเพียงแค่การพูดแบบเด็ก ๆ ปีที่บริสุทธิ์ไม่สามารถทนต่อเยาวชนได้ ฉันจะอยู่กับคุณ หิมะตกหนักโปรดอย่าลบร่องรอยของการอยู่ด้วยกันของเรา หิมะตกหนักไม่สามารถลบเครื่องหมายที่เราให้กันได้ คืนนี้หญ้าจะถูกแยกออกและคืนพระจันทร์สดใสจะส่งคุณหลายพันไมล์เพื่อรอให้ลมฤดูใบไม้ร่วงมาถึง "data-original-title =" เวลาที่จะต้มฝน "> คลิกเพื่อโหลด </a>
<strong> การเริ่มต้น JS: </strong> <script type = "text/javascript"> $ ("#a_pop"). popover (); </script>ผลตัวอย่าง:
โปรดทราบว่าเมื่อมีการระบุตำแหน่งให้ให้ความสนใจเป็นพิเศษกับปัญหาทิศทาง เนื่องจากกล่องป๊อปอัพเริ่มโผล่ขึ้นมาพร้อมกับศูนย์กลางขององค์ประกอบเหตุการณ์ทริกเกอร์จึงมีแนวโน้มที่จะถูกเขียนทับและไม่สามารถแสดงทั้งหมดได้
แอตทริบิวต์ A TAG HREF ในรหัสจะต้องระบุเป็น JavaScript: Void (0) เพื่อลบเอฟเฟกต์ลิงก์
สี่ทิศทาง:
รหัส
<a href = "JavaScript: void (0)" id = "a_pop1" data-placement = "left" data-content = "ลมและฝนเป็นเหมือนใช้เวลาในการตามหาม้าขาว <a href = "JavaScript: void (0)" id = "a_pop2" data-placement = "top" data-content = "เราบอกว่าเราไม่ควรแยกและเราควรอยู่ด้วยกันเสมอแม้ว่าเราจะเป็นศัตรูกับเวลาแม้ว่าเราจะออกจากโลกทั้งโลก data-original-title = "เวลาในการต้มฝน"> ตอนบน </a> <a href = "JavaScript: void (0)" id = "a_pop3" data-placement = "ล่าง" data-content = "ความปรารถนาที่ไม่มีที่สิ้นสุด คำพูดของเด็ก " data-original-title = "เวลาในการต้มฝน"> ต่ำกว่า </a> <a href = "javascript: void (0)" id = "a_pop4" data-placement = "ถูกต้อง" data-content = "ปีผู้บริสุทธิ์ไม่สามารถหลอกลวงได้ คืนนี้หญ้าออกจากดวงจันทร์ที่สดใสและส่งคุณหลายพันไมล์เพื่อรอให้ลมในฤดูใบไม้ร่วงเพิ่มขึ้นในปีหน้า $ ("#a_pop2"). popover (); $ ("#a_pop3"). popover (); $ ("#a_pop4"). popover (); </script>เอฟเฟกต์ตัวอย่าง
2. ตัวเลือก
ตัวเลือกสามารถส่งผ่านคุณสมบัติข้อมูลหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลคุณต้องใส่ชื่อตัวเลือกหลังจาก data- ตัวอย่างเช่น data-animation = ""
ใช้คุณสมบัติข้อมูลกับกล่องป๊อปอัพเดียว
สำหรับกล่องป๊อปอัพเดียวคุณสามารถระบุตัวเลือกแยกต่างหากผ่านคุณสมบัติ DATA ดังที่แสดงด้านบน
3. วิธี
$ (). popover (ตัวเลือก)
เริ่มต้นกล่องป๊อปอัพสำหรับชุดขององค์ประกอบ
.popover ('show')
แสดงกล่องป๊อปอัพ
$ ('#element'). popover ('show')
.popover ('ซ่อน')
ซ่อนกล่องป๊อปอัพ
$ ('#element'). popover ('ซ่อน')
.popover ('สลับ')
แสดงหรือซ่อนกล่องป๊อปอัพ
$ ('#element'). popover ('สลับ')
.Popover ('ทำลาย')
ซ่อนและทำลายกล่องป๊อปอัพ
$ ('#element'). popover ('ทำลาย')
iv. เหตุการณ์
$ ('#mypopover') บน ('hidden.bs.popover', function () {// ทำอะไรสักอย่าง…})หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้และเชี่ยวชาญกล่องป๊อปอัพ bootstrap