แบบร่าง HTML 5.2 เพิ่มองค์ประกอบโต้ตอบใหม่ แต่มันเป็นเทคนิคการทดลอง
ก่อนหน้านี้ หากเราต้องการสร้าง Modal Dialog หรือ Dialog Box ใดๆ เราจำเป็นต้องมีพื้นหลัง ปุ่มปิด เชื่อมโยงเหตุการณ์ในกล่องโต้ตอบ จัดเรียงมาร์กอัปของเราในลักษณะ ค้นหาวิธีส่งข้อความออกไป Way คุยกัน...มันซับซ้อนจริงๆ องค์ประกอบกล่องโต้ตอบช่วยแก้ปัญหาข้างต้นทั้งหมด
การเปรียบเทียบระหว่างกล่อง Modal Bootstrap และกล่อง Modal ดั้งเดิมต่อไปนี้เป็นโครงสร้าง html ของกล่อง modal bootstrap:
<!-- ปุ่มทริกเกอร์ modal box--><button class=btn btn-primary btn-lg data-toggle=modal data-target=#myModal> เริ่มสาธิต modal box</button><!-- Modal Box (Modal ) --><div class=modal fade id=myModal tabindex=-1 Role=dialog aria-labelledby=myModalLabel aria-hidden=true> <div class=modal-dialog> <div class=modal-content> <div class=modal-header> <ประเภทปุ่ม=ปุ่ม class=close data-dismiss=modal aria-hidden=true> × =modal-title id=myModalLabel> ชื่อกิริยา</h4> </div> <div class=modal-body> เพิ่มข้อความบางส่วนที่นี่</div> <div class=modal-footer> <button type=button class=btn btn-default data-dismiss=modal>ปิด</button> <button type=button class=btn btn-primary> ส่งการเปลี่ยนแปลง</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div>
ต่อไปนี้เป็นโครงสร้าง HTML ของกล่องกิริยาพื้นเมือง:
<!-- ปุ่มทริกเกอร์กล่องโมดอล--><button type=button class=btn>แสดงกล่องโมดอล</button><!-- กล่องโมดอล--><กล่องโต้ตอบเปิด> กล่องโมดอลดั้งเดิมของ HTML5</ กล่องโต้ตอบ>รูปแบบกล่องโมดอลพื้นฐาน
เราได้เห็นมาร์กอัปที่ง่ายที่สุดขององค์ประกอบกล่องโต้ตอบแล้ว และคุณอาจสังเกตเห็นว่า open เป็นแอตทริบิวต์ในกล่องโต้ตอบด้านบน การเพิ่มแอตทริบิวต์นี้ให้กับองค์ประกอบจะบังคับให้กล่องโต้ตอบปรากฏขึ้น มิฉะนั้นจะถูกลบออก กล่องโต้ตอบจะถูกวางตำแหน่งบนหน้าอย่างแน่นอน
รูปภาพด้านบนแสดงรูปแบบกล่องกิริยาพื้นฐาน
เปิดเบราว์เซอร์แล้วคุณจะเห็นว่ารูปแบบพื้นฐานของมันเป็นดังนี้:
กล่องโต้ตอบ { แสดง: บล็อก; ตำแหน่ง: สมบูรณ์; ซ้าย: 0px; ความกว้าง: -webkit-fit-content; รูปแบบเส้นขอบ: ทึบ; เส้นขอบสี: เริ่มต้น; เส้นขอบภาพ: เริ่มต้น; ช่องว่างภายใน: 1em;
องค์ประกอบกล่องโต้ตอบยังแนะนำตัวเลือกคลาสหลอกใหม่ :: ฉากหลัง สไตล์เริ่มต้น :: ที่ดูผ่านเบราว์เซอร์มีดังนี้:
กล่องโต้ตอบ :: ฉากหลัง { ตำแหน่ง: คงที่; ด้านบน: 0px; ด้านล่าง: 0px; ซ้าย: 0px;ตั้งค่ารูปแบบกล่องโต้ตอบ
เราสามารถจัดสไตล์องค์ประกอบไดอะล็อกได้เหมือนกับองค์ประกอบ HTML ใดๆ และสไตล์ CSS เกือบทุกสไตล์ก็สามารถทำได้ ด้วยตัวเลือกคลาสหลอก ::backdrop เราสามารถใช้มันเพื่อกำหนดสไตล์ของพื้นหลังได้
ตัวอย่างเช่น:
กล่องโต้ตอบ { ระยะขอบ: 250px; ความสูง: 250px; text-align: center; :ฉากหลัง { พื้นหลัง: rgba(สีดำ, .5);}
เอฟเฟกต์สไตล์ข้างต้นมีดังนี้:
API การดำเนินการโต้ตอบด้านล่างนี้เป็นกล่องโต้ตอบพื้นฐานที่ไม่แสดงสิ่งใดเลยเนื่องจากไม่ได้ตั้งค่าแอตทริบิวต์เปิด คุณต้องใช้ JavaScript API เพื่อแสดง/ซ่อน:
<dialog>นี่คือกล่องโต้ตอบ! </โต้ตอบ>
API .show() และ .close() ขององค์ประกอบกล่องโต้ตอบจะแสดงและปิดกล่องโต้ตอบตามลำดับ โดยการใช้ API ทั้งสองนี้บนองค์ประกอบ DOM คุณสามารถแสดงและปิดกล่องโต้ตอบได้
ตัวอย่างเช่น:
<!-- HTML --><dialog> <p>นี่คือกล่องโต้ตอบ! </p> <button id=close>ปิดกล่องโต้ตอบ</button></dialog><button id=show>แสดงกล่องโต้ตอบ</button> <!-- script --> <script> var Dialog = document. querySelector(dialog); document.querySelector(#show).onclick = function(){ Dialog.show(); }; document.querySelector(#close).onclick = function(){ โต้ตอบ.ปิด(); };</สคริปต์>
คุณสามารถส่งพารามิเตอร์ไปที่ไดอะล็อก.ปิด() โดยการฟังเหตุการณ์ปิดขององค์ประกอบกล่องโต้ตอบ คุณสมบัติ Dialog.returnValue จะส่งคืนค่าที่กำหนด
ชอบ:
<!--HTML--><dialog> <p>นี่คือกล่องโต้ตอบ! </p> <p><input type=text id=return_value value= placeholder=Please enter content/></p> <button id=close>ปิดกล่องโต้ตอบ</button></dialog><button id=show >แสดงกล่องโต้ตอบ</button><!--script--><script> varกล่องโต้ตอบ = document.querySelector(dialog); document.querySelector(#show).onclick = function(){ Dialog.showModal(); }; document.querySelector(#close).onclick = function(){ var = document.querySelector(#return_value).value; Dialog.close(val) }; องค์ประกอบเหตุการณ์ปิดกล่องโต้ตอบ addEventListener (ปิด, ฟังก์ชั่น () { การแจ้งเตือน (this.returnValue); });</script>
API อื่นสำหรับการแสดงกล่องโต้ตอบคือ .showModal()
หากคุณไม่ต้องการให้ผู้ใช้โต้ตอบกับออบเจ็กต์องค์ประกอบของหน้านอกเหนือจากกล่องโต้ตอบ ให้ใช้ .showModal() เพื่อเปิดกล่องโต้ตอบแทนการใช้ .show() กล่องโต้ตอบที่เปิดด้วย .showModal() จะมีเลเยอร์พื้นหลังโปร่งแสงแบบเต็มหน้าต่าง ซึ่งจะบล็อกผู้ใช้จากการโต้ตอบกับวัตถุองค์ประกอบของหน้านอกกล่องโต้ตอบ ในเวลาเดียวกัน กล่องโต้ตอบจะปรากฏขึ้นตรงกลางหน้าต่าง โดยค่าเริ่มต้น (ตรงกลางบน ล่าง ซ้าย และขวา) ) และกล่องโต้ตอบที่เปิดด้วย .show() จะแสดงที่ด้านบนของหน้าต่างตามค่าเริ่มต้น (จอแสดงผลตรงกลางสามารถทำได้ผ่าน CSS)
หลังจากปิดกล่องโต้ตอบ ปิดจะทริกเกอร์เหตุการณ์ นอกจากนี้ ผู้ใช้สามารถปิดกล่องโต้ตอบโมดอลได้โดยการป้อนคีย์ Escape นี่จะเป็นการเริ่มเหตุการณ์การยกเลิกซึ่งคุณสามารถยกเลิกได้โดยใช้ event.preventDefault()
บูรณาการกับแบบฟอร์มคุณสามารถใช้ form[method=dialog] เพื่อรวมแบบฟอร์มเข้ากับองค์ประกอบ <dialog> หลังจากส่งแบบฟอร์มแล้ว จะปิดกล่องโต้ตอบและตั้งค่า Dialog.returnValue เป็นค่าของปุ่มส่งที่ใช้
นอกจากนี้ คุณสามารถใช้คุณสมบัติโฟกัสอัตโนมัติเพื่อโฟกัสไปที่ตัวควบคุมฟอร์มภายในกล่องโต้ตอบโดยอัตโนมัติเมื่อป็อปอัปได้
ตัวอย่างเช่น:
<!--HTML--><dialog id =dialog> <form method =dialog> <p>คุณยอมรับข้อกำหนดการใช้งานหรือไม่ </p> <p><textarea class = ปิดใช้งานการควบคุมฟอร์ม>ข้อกำหนดต้องการ...</textarea></p> <ประเภทปุ่ม =ส่งค่า =ใช่>ใช่</ปุ่ม> <ประเภทปุ่ม =ส่งค่า = ไม่มีออโต้โฟกัส>ไม่</button> </form></dialog><button id=show>แสดงกล่องโต้ตอบแบบฟอร์ม</button><!--script--><script> var dial = document.querySelector(dialog) ; document.querySelector(#show).onclick = function(){ Dialog.showModal(); }; //ฟังเหตุการณ์ปิดขององค์ประกอบไดอะล็อก == ใช่ ){ alert(this.returnValue) //dosomething... }else{ alert(this.returnValue) //dosomething... }; });</script>ความเข้ากันได้ของเบราว์เซอร์
ในบรรดาเบราว์เซอร์บนเดสก์ท็อป มีเพียง Google Chrome เท่านั้นที่สนับสนุนฟังก์ชันการทำงานเต็มรูปแบบของกล่องโต้ตอบ ( ณ เวลาที่โพสต์ในบล็อกนี้) เพื่อให้เกิดความเข้ากันได้ข้ามเบราว์เซอร์ โปรดใช้กล่องโต้ตอบโพลีฟิล
<iframe src=//caniuse.com/dialog/embed scrolling=noallowtransparency=true Allowfullscreen=true frameborder=0></iframe>
อ้างอิงบทความอ้างอิง: การสาธิตองค์ประกอบกล่องโต้ตอบ
โครงการโอเพ่นซอร์ส Furenไลบรารีฟังก์ชัน โดยปกติ js: https://github.com/JofunLiang/usuallyjs
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network