การใช้ Windows ป๊อปอัพเพื่อแสดงข้อความสั้น ๆ บนหน้าเว็บก็โอเคแม้ว่าจะไม่เป็นมิตร อย่างไรก็ตามป๊อปอัปไม่มีอำนาจที่จะทำกับข้อมูลที่ยาวเช่นข้อกำหนดในการให้บริการของเว็บไซต์ สิ่งนี้ต้องใช้สิ่งที่เรียกว่า Modal Box Modal และฝังกล่องข้อความหลายบรรทัดในกล่องโมดอล
สิ่งนี้ยากเกินไปที่จะเขียนรหัส JavaScript ด้วยตนเอง แต่มันง่ายกว่าที่จะเขียนด้วย bootstrap
1. วัตถุประสงค์พื้นฐาน
มีหน้าเว็บที่มีไฮเปอร์ลิงก์และปุ่ม:
การคลิกพวกเขาจะเปิดกล่องโมดอลตามที่แสดงด้านล่าง กล่องโมดอลนี้คลิกปุ่ม X ที่มุมขวาบนและการยืนยันด้านล่างจะปิด
2. กระบวนการผลิต
1. เนื่องจากคุณต้องใช้ bootstrap คุณสามารถดาวน์โหลดส่วนประกอบบนเว็บไซต์ทางการ (คลิกเพื่อเปิดลิงค์) รุ่น bootstrap ที่ใช้ในสภาพแวดล้อมการผลิต (คลิกเพื่อเปิดลิงค์) Bootstrap3 ไม่สามารถใช้งานได้กับ 2 ขอแนะนำให้ใช้ bootstrap3 โดยตรงตามเอกสารการพัฒนา บทความนี้ทำขึ้นตาม bootstrap3 ในเวลาเดียวกันเอฟเฟกต์ JavaScript ที่จัดทำโดย Bootstrap3 จะต้องได้รับการสนับสนุนโดย jQuery1.11 (คลิกเพื่อเปิดลิงค์) คุณสามารถดาวน์โหลด jQuery1.11 (คลิกเพื่อเปิดลิงค์) เข้ากันได้กับเบราว์เซอร์เก่า IE6 (คลิกเพื่อเปิดลิงค์) จากเว็บไซต์ทางการ JQuery แทนที่จะเป็น JQuery2 (คลิกเพื่อเปิดลิงค์) ในเบราว์เซอร์เก่า IE6 หลังจากดาวน์โหลดแล้วให้กำหนดค่าไดเรกทอรีไซต์ DECOMPRESS BOOTSTRAP3 โดยตรงไปยังไดเรกทอรีไซต์และวาง jQuery-1.11.1.JS ในไดเรกทอรี JS นั่นคือไดเรกทอรีเดียวกับ bootstrap.js โครงสร้างของโฟลเดอร์ไซต์มีดังนี้:
2. รหัสของหน้าเว็บนี้มีดังนี้และวิเคราะห์ชิ้นส่วนต่อไปนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-ype" content = "text/html; charset = utf-8"/> content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0, ผู้ใช้-scalable = no"> <link href = "css/bootstrap.css" rel = "Stylesheet" Media = "Screen"> <script type = "Text/JavaScript src = "js/bootstrap.js"> </script> </head> <body> <p> <a data-toggle = "modal" data-target = "#mymodal"> ข้อตกลงบริการ </a> </p> <p> <button = "data-toggle =" modal "data-target =" mymodal " id = "mymodal" role = "กล่องโต้ตอบ"> <div> <div> <div> <button type = "ปุ่ม" data-dismiss = "modal"> <span> × </span> </button> <h4 id = "mymodallabel" ผล. ข้อกำหนดในการให้บริการของข้อตกลงนี้มีผลทางกฎหมาย ข้อกำหนดในการให้บริการของข้อตกลงนี้มีผลทางกฎหมาย ข้อกำหนดในการให้บริการของข้อตกลงนี้มีผลทางกฎหมาย </textarea> </p> </div> <div> <p allign = "center"> <button type = "ปุ่ม" data-dismiss = "modal"> ตกลง </button> </p> </div> </div> </div> </div> </div>
(1) <head> ส่วนหนึ่ง
<head> <!-การเข้ารหัสหน้า-> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> กล่องโมดอล </title> <! content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0, ผู้ใช้-scalable = no"> <!-ตัวอย่างนี้ต้องได้รับการสนับสนุนจากปลั๊กอินภายนอกสามตัว-> <link href = "css/bootstrap.css" rel = "stylesheet" media = "หน้าจอ type = "text/javascript" src = "js/bootstrap.js"> </script> </head>
(2) ลิงก์และปุ่มที่นำเสนอเดิมบนหน้าเว็บ
<p> <!-data-toggle = "modal" data-target = "#mymodal" ต้องใช้กล่องโมดอลแบบเปิดของ mymodal-> <a data-toggle = "modal" data-target = "#mymodal"> รูปแบบการบริการ </a> </p> <p> <! -> <button type = "button" data-toggle = "modal" data-target = "#mymodal"> คลิกที่นี่เพื่ออ่านข้อตกลงบริการ </ button> </p>
(3) ส่วนกล่องโมดอล
พื้นฐานของกล่องโมดอลมีดังนี้:
ดังนั้นพบรหัสต่อไปนี้:
<!-class = "Modal Fade" ต้องใช้กล่องโมดอลที่จะเปิดด้วยเอฟเฟกต์แอนิเมชั่นจางหายไป class = "modal" ก็โอเค แต่มันก็เปิดอย่างกะทันหัน id = "mymodal" สะท้อนไฮเปอร์ลิงก์และปุ่มด้านบน-> <div id = "mymodal" role = "กล่องโต้ตอบ"> <div> <!-เค้าโครงกล่องโมดอลจะต้องดำเนินการหลังจาก modal-content -> <div> <div> <!-นี่คือส่วนชื่อของกล่องโมดอลโดยมีเครื่องหมายอัฒภาคของ×และตัวละครถ่ายโอนด้วย×ซึ่งเป็นปุ่มปิด-> <button type = "ปุ่ม" data-dismiss = "modal"> <span> × </span> <div> <!-นี่คือส่วนหลักของกล่องโมดอลซึ่งฝังอยู่ในกล่องข้อความแบบอ่านอย่างเดียวที่มีจำนวนบรรทัด 3 กล่องข้อความจะอยู่ตรงกลางในส่วนหลักของกล่องโมดอล ไม่เป็นไรหากไม่มีกล่องข้อความ แต่เนื้อหาจะถูกนำเสนอต่อผู้ใช้ในคราวเดียว แล้วทำไมไม่เพียงแค่ปรากฏขึ้นที่หน้าต่าง? -> <p allign = "center"> <textarea rows = 3 readonly = "true" /> ข้อกำหนดในการให้บริการของข้อตกลงนี้มีประสิทธิภาพตามกฎหมาย ข้อกำหนดในการให้บริการของข้อตกลงนี้มีผลทางกฎหมาย ข้อกำหนดในการให้บริการของข้อตกลงนี้มีผลทางกฎหมาย ข้อกำหนดในการให้บริการของข้อตกลงนี้มีผลทางกฎหมาย </textarea> </p> </div> <div> <!-นี่คือหางของกล่องโมดอลและปุ่มตกลงกึ่งกลางถูกวางไว้-> <p allign = "center"> <button type = "ปุ่ม" data-dismiss = "modal"> ok </button>
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น