กล่องโต้ตอบ (หรือที่เรียกว่า Modal Boxes และ Floating Layer) เป็นส่วนสำคัญของการโต้ตอบของผู้ใช้ในโครงการเว็บ กล่องโต้ตอบที่พบบ่อยที่สุดที่เราใช้คือ alert() และ ยืนยัน() ใน js อย่างไรก็ตาม กล่องโต้ตอบนี้ไม่สวยงามและไม่สามารถทำได้ ปรับแต่งสไตล์ได้ ดังนั้นในระหว่างกระบวนการพัฒนา โดยทั่วไปเราจะสร้างล้อตามความต้องการของเราเองหรือใช้บุคคลที่สาม
องค์ประกอบของกล่องโต้ตอบกล่องป๊อปอัปรูปแบบทั่วไป:
ตำแหน่ง: มุมซ้ายบนของหน้าจอ มุมขวาบน มุมซ้ายล่าง มุมขวาล่าง กึ่งกลางแนวตั้ง ฯลฯ
ขนาด: ความกว้างคงที่และความสูงคงที่ ความกว้างคงที่และความสูงคงที่ ความกว้างผันแปรและความสูงคงที่ ฯลฯ
แบบฟอร์มกล่องโต้ตอบที่อยู่ระหว่างการพัฒนาเป็นกรณีของการสุ่มตำแหน่งและขนาดรวมกัน
อย่างไรก็ตาม มีสถานการณ์หนึ่ง (การจัดกึ่งกลางแนวตั้งด้วยความกว้างและความสูงที่แปรผันได้) ซึ่งไม่ใช่เรื่องง่ายที่จะนำไปใช้ (คุณสามารถใช้ display:table หรือการแปลของ CSS3 หรือแบบยืดหยุ่นเพื่อให้บรรลุผลได้) สำหรับรายละเอียด โปรดดูที่เค้าโครงการจัดกึ่งกลางแนวนอนและแนวตั้ง .
กล่องโต้ตอบด้านบนประกอบด้วยคอนเทนเนอร์สำหรับเนื้อหา และยังมีเลเยอร์มาสก์ (มาสก์) ใต้กล่องโต้ตอบ เลเยอร์มาสก์เป็นเลเยอร์ที่แยกระหว่างกล่องโต้ตอบและเนื้อหาของหน้าที่สร้างขึ้นหลังจากที่ผู้ใช้ทริกเกอร์กล่องป๊อปอัป การมีอยู่ของมันสามารถทำให้ผู้ใช้เห็นเอฟเฟกต์ความแตกต่างที่ชัดเจนยิ่งขึ้น และในขณะเดียวกันก็หลีกเลี่ยงการดำเนินการหลักของเพจที่ไม่จำเป็นอื่น ๆ หลังจากที่ผู้ใช้เรียกใช้กล่องโต้ตอบ จึงสร้างประสบการณ์ผู้ใช้ที่ดีขึ้น
มีปัญหาเกิดขึ้นแม้ว่าจะมีวงล้อโต้ตอบมากมายให้เราเลือก แต่เราก็ประสบปัญหาต่างๆ มากมาย
มีวิธีง่ายๆ ในการสร้างกล่องโต้ตอบหรือไม่? แน่นอนว่าเราสามารถใช้องค์ประกอบกล่องโต้ตอบ HTML5 ได้
HTML5(โต้ตอบ)
<dialog open> <h2>สวัสดีชาวโลก</h2></dialog>
มันง่ายมาก เราสามารถใช้โค้ดด้านบนเพื่อสร้างกล่องโต้ตอบที่ปรากฏขึ้นพร้อมกับเนื้อหา 'Hello world'
นอกจากนี้ยังง่ายต่อการควบคุมการแสดง/ซ่อนกล่องโต้ตอบ เพิ่มแอตทริบิวต์เปิดเพื่อแสดง และลบออกเพื่อซ่อน แน่นอน เรายังสามารถควบคุมการแสดงผลและการซ่อนกล่องโต้ตอบผ่านอินเทอร์เฟซ DOM (show(), close())
สำหรับเลเยอร์มาสก์ใต้กล่องโต้ตอบ เราสามารถใช้องค์ประกอบหลอก ::backgrop และเพื่อเปิดใช้งาน เราจำเป็นต้องใช้ showModal() DOM API ลักษณะของ ::backgrop คือตำแหน่งที่อยู่ใต้กล่องโต้ตอบ ในดัชนี z ใดๆ ข้างต้น
การใช้ showModal() ไม่เพียงแต่สามารถแสดงเลเยอร์มาสก์เท่านั้น แต่ยังรวมถึงคอนเทนเนอร์กล่องโต้ตอบด้วย ดังนั้นเมื่อใช้ ::backdrop คุณสามารถใช้ showModal() แทน show() API ได้ หากคุณกดปุ่ม ESC บนแป้นพิมพ์ ไฟล์ เลเยอร์ป๊อปอัปจะถูกปิด แน่นอนว่าคุณสามารถใช้ close() DOM API ได้
เราสามารถตั้งค่า ::backdrop layer ให้เป็นเลเยอร์กึ่งโปร่งใสได้ โดยมีโค้ดดังนี้:
กล่องโต้ตอบ :: ฉากหลัง { สีพื้นหลัง: rgba (0, 0, 0, 0.75);}นอกจากเลเยอร์ป๊อปอัปทั่วไปของเราพร้อมข้อมูลที่แจ้งแล้ว ยังมีเลเยอร์ป๊อปอัปที่มีแบบฟอร์มที่ใช้กันทั่วไปมากกว่าอีกด้วย
เลเยอร์ป๊อปอัปพร้อมแบบฟอร์มเราสามารถใช้องค์ประกอบกล่องโต้ตอบ HTML5 รวมกับองค์ประกอบแบบฟอร์มเพื่อสร้างเลเยอร์ป๊อปอัปเหล่านี้ได้หรือไม่
คำตอบ:ใช่
เราจะรวมองค์ประกอบแบบฟอร์มและองค์ประกอบกล่องโต้ตอบเข้าด้วยกันได้อย่างไร
คำตอบ: เราเพียงต้องเพิ่มแอตทริบิวต์ method=dialog ให้กับองค์ประกอบกล่องโต้ตอบ เพื่อให้สามารถส่งค่าของค่าแอตทริบิวต์ขององค์ประกอบปุ่มไปยังองค์ประกอบกล่องโต้ตอบได้
<dialog> <form method=dialog> <p>ยืนยันหรือยกเลิก</p> <button type=submit value=yes>ยืนยัน</button> <button type=submit value=no>ยกเลิก</button> </form ></dialog><script> var dial = document.querySelector('dialog') dial.showModal() dial.addEventListener('close', function(event) { console.log(dialog.returnValue) })</script>การสาธิต
ความเข้ากันได้ของเบราว์เซอร์แม้ว่านี่จะเป็น HTML5 ที่ค่อนข้างใช้งานง่าย แต่ก็ยังมีปัญหาความเข้ากันได้อยู่ Chrome และ Opera รองรับได้ดีกว่า มันเป็นคุณสมบัติทดลองใน Firefox แต่ไม่ได้รับการสนับสนุนโดย IE, Edge และ Safari โดย ios และรองรับโดย Android ยังไม่ดีพอและรองรับโดย Android 6 ขึ้นไปเท่านั้น สำหรับรายละเอียด โปรดดูที่ caniuse
เบราว์เซอร์เวอร์ชันเก่าสามารถรองรับกล่องโต้ตอบ HTML5 ได้หรือไม่ ก่อนอื่น สิ่งที่เราคิดคือมีโพลีฟิลที่รองรับไดอะล็อก เช่นเดียวกับ babel-polyfill ที่รองรับฟีเจอร์ใหม่ของ es6 หรือไม่ มีโปรเจ็กต์โอเพ่นซอร์ส a11y-dialog ซึ่งมีเวอร์ชันต่างๆ ของ vue และ ตอบสนองตามลำดับ
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network