ก่อนหน้านี้เราอธิบายการใช้แท็บ bootstrap วันนี้เราจะได้เรียนรู้เกี่ยวกับการใช้หน้าต่างป๊อปอัพแบบจำลองใน Bootstrap
ผล:
รหัส:
<อินพุต id = "btntext" type = "button" value = "เพิ่มส่วนประกอบข้อความ" data-toggle = "modal" data-target = "#mymodal" href = "../ sysmanage/zujianmanage.aspx"/> <! data-dismiss = "modal"> × </button> <h3 id = "mymodallabel"> ส่วนหัวโมดัล </h3> </div> </div> </div>
มันง่ายมากนั่นคือทั้งหมด
หมายเหตุ: คุณสมบัติของเป้าหมายข้อมูลชี้ไปที่ ID ของรุ่นดังนั้นคลิกปุ่มและรุ่นจะปรากฏขึ้น
แน่นอนคุณสามารถใช้ JS เพื่อควบคุมได้
รหัสต่อไปนี้:
แสดง: $ ('#mymodal'). modal ('show');
ซ่อน: $ ('#mymodal'). modal ('ซ่อน');
สวิตช์: $ ('#mymodal'). modal ('toogle');
เหตุการณ์: $ ('#mymodal'). on ('hidden', function () {// ทำอะไรบางอย่าง…});
หมายเหตุ: ฉันใช้แอตทริบิวต์ HREF ที่นี่ซึ่งก็คือการให้รุ่นรีโมทเป็น URL แน่นอนคุณสามารถเขียนสิ่งที่คุณต้องการโดยตรงลงในร่างกายโมเดล
หากคุณดูโครงสร้าง DIV ของแบบจำลองอย่างรอบคอบคุณจะเข้าใจว่าตัวแบบโมเดลแสดงถึงเนื้อหาและหัวจำลองเป็นส่วนหัว ดังนั้นหากคุณต้องการเพิ่มสองปุ่มที่ด้านล่างคุณต้องใช้รหัสต่อไปนี้
<div> <a href = "#"> ปิด </a> <a href = "#"> บันทึก </a> </div>
หมายเหตุ: หากคุณต้องการตั้งค่าความกว้างของโมเดลคุณต้องเพิ่มเค้าโครง มันคือการวางโมเดลในบล็อกรหัสด้านล่างและตั้งค่าความกว้างของโมเดล style = "ความกว้าง: 500px" โดยวิธีการที่คุณไม่สามารถวางไว้ในชั้นเรียนโดยใช้สไตล์การขยาย -
<div> </div>
ด้านบนคือการใช้กล่องป๊อปอัพ Bootstrap Model ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!