การสร้าง Native HTML5 Dialog Windows

เผยแพร่แล้ว: 2017-03-29

หน้าต่างโต้ตอบเป็นหนึ่งในองค์ประกอบที่ใช้บ่อยที่สุดในการออกแบบส่วนต่อประสานผู้ใช้ของเว็บไซต์ มันถูกใช้เพื่อวัตถุประสงค์หลายประการ รวมถึงการแสดงการแจ้งเตือน การส่งแบบฟอร์มการสมัครรับข้อมูล การแจ้งเตือนข้อผิดพลาด/คำเตือน และการดึงความสนใจของผู้เข้าชมไปยังส่วนข้อมูลที่สำคัญ เมื่อหน้าต่างโต้ตอบได้รับการออกแบบอย่างมีประสิทธิภาพและใช้งานได้อย่างเหมาะสม จะทำให้งานของผู้ใช้ง่ายขึ้น

ก่อนหน้านี้ การสร้างหน้าต่างโต้ตอบจำเป็นต้องใช้ปลั๊กอิน jQuery เช่น Pop Easy, jQuery UI Dialog หรือ Twitter Bootstrap Modal แต่ตอนนี้ ด้วยการแนะนำองค์ประกอบ <dialog> ใหม่ของ HTML5 ทำให้นักพัฒนาสามารถสร้างกล่องโต้ตอบและโมดอลป๊อปอัปบนหน้าเว็บได้ง่ายขึ้นมาก

เริ่มแรก แท็ก <dialog> ป้อนข้อกำหนด HTML5 เพื่อเป็นโซลูชันที่ยอดเยี่ยมสำหรับการมาร์กอัปการสนทนา แต่ถูกละทิ้งจากข้อกำหนด HTML5 ย้อนกลับไปในปี 2009 อย่างไรก็ตาม แท็กได้กลับมาอยู่ในรูปแบบใหม่อีกครั้ง

ในโพสต์นี้ ฉันจะนำคุณผ่านองค์ประกอบ <dialog> และแสดงให้เห็นว่าคุณจะใช้ประโยชน์สูงสุดจากมันได้อย่างไร เอาล่ะ!

หากคุณต้องการดูการทำงานขององค์ประกอบ <dialog> หรือลองใช้โค้ด ดูการสาธิตสดที่นี่

รองรับเบราว์เซอร์สำหรับ <dialog> Element

ขออภัย การสนับสนุนเบราว์เซอร์สำหรับ <dialog> ถูกจำกัดในขณะนี้ ปัจจุบันองค์ประกอบได้รับการสนับสนุนใน Safari 6.0 และ Chrome Canary เท่านั้น แม้ว่า Chrome Canary จะสนับสนุนแท็กอย่างสมบูรณ์ แต่คุณต้องเปิดใช้การตั้งค่าสถานะเพื่อใช้งาน ไปที่ chrome://flags และเปิดใช้งานแฟล็ก “เปิดใช้งานฟีเจอร์แพลตฟอร์มเว็บรุ่นทดลอง”

เปิดใช้งานคุณสมบัติแพลตฟอร์มเว็บรุ่นทดลองที่เปิดใช้งาน

หลังจากเปิดใช้งานการตั้งค่าสถานะ คุณต้องเปิดเบราว์เซอร์ใหม่เพื่อให้การเปลี่ยนแปลงมีผล

อินเทอร์เฟซ HTMLDialogElement

อินเทอร์เฟซ HTMLDialogElement ซึ่งรวมอยู่ในข้อกำหนด HTML สำหรับองค์ประกอบ <dialog> มีคุณสมบัติและวิธีการมากมายที่คุณสามารถใช้เพื่อทำให้กล่องโต้ตอบปรากฏขึ้นและหายไป พวกเขามีดังนี้:

วิธีการ:

อินเทอร์เฟซ HTMLDialogElement มีสามวิธีในการเปิดและปิดกล่องโต้ตอบ

  • show() : วิธีนี้ใช้เพื่อแสดงไดอะล็อก ผู้ใช้ยังคงสามารถเข้าถึงเนื้อหาอื่นๆ ของเอกสาร HTML ได้ตราบเท่าที่กล่องโต้ตอบเปิดอยู่
  • showModal() : ใช้เพื่อเรียกใช้ "modal dialog" ซึ่งป้องกันไม่ให้ผู้ใช้เข้าถึงสิ่งใด ๆ ยกเว้นหน้าต่างโต้ตอบบนหน้าเว็บ
  • close() : ใช้เพื่อปิดไดอะล็อก คุณสามารถส่ง returnValue เป็นพารามิเตอร์ทางเลือกที่จะอัพเดตคุณสมบัติ returnValue

คุณสมบัติ:

มีคุณสมบัติสองอย่างรวมอยู่ในอินเทอร์เฟซ HTMLDialogElement

  • returnValue : ดึงพารามิเตอร์ที่ถูกเลือกส่งผ่าน close()
  • open : คุณสมบัตินี้เป็นค่าบูลีน หาก true ผู้ใช้จะมองเห็นไดอะล็อก มิฉะนั้นจะถูกซ่อนไว้

กิจกรรม:

เมื่อปิดกล่องโต้ตอบ เหตุการณ์ close จะเริ่มขึ้น

 dialog.addEventListener ('ปิด', ฟังก์ชัน () {
รหัสอื่นจะไปที่นี่...
});

นอกเหนือจากวิธีการหลักและคุณสมบัติเหล่านี้ <dialog> องค์ประกอบยังสนับสนุน:

  • form[method="dialog"] : ใช้เพื่อรวมแบบฟอร์มกับ <dialog> ใช้ได้เฉพาะในกล่องโต้ตอบ
  • autofocus attribute : ใช้เพื่อกำหนดโฟกัสให้กับตัวควบคุมฟอร์มภายในกล่องโต้ตอบ
  • cancel event : เหตุการณ์การ cancel จะเริ่มต้นขึ้นเมื่อปิดกล่องโต้ตอบโมดอลผ่าน "Esc"

หลังจากที่เข้าใจพื้นฐานขององค์ประกอบ <dialog> แล้ว มาลองทำตัวอย่างกัน

การสร้างไดอะล็อก

ประการแรก ผมจะแสดงให้คุณเห็นถึงวิธีการสร้างไดอะล็อกอย่างง่าย รหัสที่ให้ไว้ด้านล่างกำหนดองค์ประกอบ <dialog> อย่างง่ายพร้อมเนื้อหาบางส่วน ปุ่มปิดเพื่อซ่อนกล่องโต้ตอบ และปุ่มแสดงเพื่อเปิดกล่องโต้ตอบ



ยินดีต้อนรับสู่ Responsive Junction!


ให้ไซต์ที่มีอยู่ของคุณตอบสนอง

เมื่อคุณทดสอบโค้ดด้านบนในเบราว์เซอร์ของคุณ คุณจะไม่เห็นอะไรเลยนอกจากปุ่ม "แสดงกล่องโต้ตอบ" ที่ไม่มีฟังก์ชันใดๆ ดังที่แสดงในภาพหน้าจอด้านล่าง:

แสดงปุ่มไดอะล็อกโดยไม่มีฟังก์ชันใด ๆ

ในการเปิดและปิดองค์ประกอบ <dialog> คุณต้องใช้ JavaScript .show( .show() และ . .close()

 (การทำงาน() {  
 	กล่องโต้ตอบ var = document.getElementById('Dialog');
document.getElementById ('showDialog').onclick = ฟังก์ชั่น () {  
ไดอะล็อก.show();  
};  
document.getElementById ('closeDialog').onclick = ฟังก์ชั่น () {  
ไดอะล็อก.close();  
};
})();

ตอนนี้ หากคุณคลิกปุ่ม "แสดงกล่องโต้ตอบ" คุณจะเห็นหน้าต่างโต้ตอบในเบราว์เซอร์ การคลิก "ออก" จะปิดหน้าต่างโต้ตอบ นี่คือภาพหน้าจอ:

การคลิกออกจะปิดหน้าต่างโต้ตอบ

การเพิ่มสไตล์ให้กับ Dialog

คุณสามารถเพิ่มสไตล์ CSS ให้กับไดอะล็อกของคุณ เช่นเดียวกับที่คุณทำกับองค์ประกอบอื่นๆ ตามค่าเริ่มต้น หน้าต่างโต้ตอบจะแสดงในแนวนอนโดยวางซ้อนองค์ประกอบอื่นๆ หากคุณพอใจกับตำแหน่งเริ่มต้นและรูปลักษณ์ ไม่จำเป็นต้องใช้ CSS เพิ่มเติม มิฉะนั้น คุณสามารถเพิ่ม CSS ของคุณเองเพื่อให้พอดีและออกแบบหน้าต่างโต้ตอบตามรสนิยมของคุณ อย่างที่ฉันได้ทำไปแล้วด้านล่าง:

 กล่องโต้ตอบ {
ด้านบน: 28%;
ความกว้าง: 400px;  
เส้นขอบ: 1px ของแข็ง rgba(0, 0, 0, 0.3);
รัศมีเส้นขอบ: 15px;
กล่องเงา: 0 3px 7px rgba(0, 0, 0, 0.3);
ขอบบน: 5px ทึบ #eb9816;
}
ปุ่ม{
แสดง: บล็อกอินไลน์;
รัศมีเส้นขอบ: 3px;
เส้นขอบ: ไม่มี;
ขนาดตัวอักษร: 0.9rem;
ช่องว่างภายใน: 0.4rem 0.8em;
พื้นหลัง: #eb9816;
ขอบล่าง: 1px ทึบ #f1b75c;
สี: ขาว;
font-weight: ตัวหนา;
ระยะขอบ: 0 0.25rem;
จัดข้อความ: ศูนย์;
}
ปุ่ม: โฮเวอร์, ปุ่ม: โฟกัส {
ความทึบ: 0.92;
เคอร์เซอร์: ตัวชี้;
}

การเพิ่มสไตล์ให้กับ Dialog

การสร้าง Modal Dialog

ถ้าคุณต้องการป้องกันไม่ให้ผู้ใช้ของคุณเข้าถึงเนื้อหาของ HTML คุณสามารถใช้หน้าต่างโต้ตอบโมดอลได้ เนื่องจากหน้าต่างโต้ตอบโมดอลทำให้สิ่งอื่น ๆ ทั้งหมดที่ไม่ใช่กล่องโต้ตอบปรากฏขึ้นเป็นสีเทา ผู้ใช้จะไม่สามารถเลือกข้อความที่เป็นสีเทาหรือคลิกเพื่อเลือกปุ่มในขณะที่หน้าต่างโต้ตอบเปิดอยู่

การสร้างโมดอลคล้ายกับการสร้างไดอะล็อก โดยมีความแตกต่างเพียงอย่างเดียวคือการใช้ .showModal() แทน .show() ไม่จำเป็นต้องทำการเปลี่ยนแปลงใดๆ ในโค้ด HTML

(การทำงาน() {  
 	กล่องโต้ตอบ var = document.getElementById('Dialog');
document.getElementById ('showDialog').onclick = ฟังก์ชั่น () {  
โต้ตอบ showModal(); 
};  
document.getElementById ('closeDialog').onclick = ฟังก์ชั่น () {  
ไดอะล็อก.close();  
};
})();

ในขณะที่ไดอะล็อกเริ่มต้นแสดงอยู่กึ่งกลางแนวนอน ไดอะล็อกโมดอลจะแสดงในแนวตั้งและกึ่งกลางแนวนอนในวิวพอร์ต นอกจากนี้ คุณสามารถปิดกล่องโต้ตอบโมดอลได้ด้วยการกดปุ่ม "Escape"

การสร้าง Modal Dialog

การเพิ่มสีพื้นหลังกล่องโต้ตอบโมดอล

<dialog> องค์ประกอบมีองค์ประกอบหลอกที่เรียกว่า "::backdrop" ซึ่งใช้งานได้กับ Modal Dialogs เท่านั้น เมื่อใช้องค์ประกอบนี้ คุณสามารถหรี่หน้าหลักเพื่อสื่อสารกับผู้ใช้ว่าไม่สามารถเข้าถึงได้ คุณสามารถจัดตำแหน่งและจัดรูปแบบฉากหลังโดยใช้ประโยชน์จากคุณสมบัติ CSS มาตรฐาน:

 กล่องโต้ตอบ::ฉากหลัง{
ตำแหน่ง: คงที่;
ด้านบน: 0;
ซ้าย: 0;
ขวา: 0;
ด้านล่าง: 0;
พื้นหลังสี: rgba(0, 0, 0, 0.7);
}

การเพิ่มสีพื้นหลังกล่องโต้ตอบโมดอล

การใช้ <dialog> กับ Form

แบบฟอร์มสามารถรวมเข้ากับองค์ประกอบ <dialog> โดยใช้ form method="dialog" เมื่อส่งแบบฟอร์ม หน้าต่างโต้ตอบจะปิดและส่งกลับค่าของปุ่มส่งผ่านคุณสมบัติไดอะล็อก. dialog.returnValue

นี่คือรหัส HTML สำหรับกล่องโต้ตอบแบบฟอร์ม:





คุณเห็นด้วยกับเงื่อนไขการใช้งานหรือไม่?

ใช้ JavaScript ต่อไปนี้สำหรับกล่องโต้ตอบแบบฟอร์ม

var formDialog = document.getElementById('formDialog');
document.getElementById('showformDialog').onclick = function() {  
formDialog.showModal();  
};
document.getElementById('submit').onclick = function() {
formDialog.close(ค่า);
};
document.getElementById ('formDialog').addEventListener ('ปิด', ฟังก์ชัน () {
alert(formDialog.returnValue);
});

การใช้ <dialog> กับ Form

หมายเหตุ : เพื่อความเข้าใจที่ดีขึ้น ฉันใช้ formDialog แทน Dialog ในการสาธิตของฉัน

หากคุณต้องการดูการทำงานขององค์ประกอบ <dialog> หรือลองใช้โค้ด ดูการสาธิตสดที่นี่

บทสรุป

ด้วยการกลับชาติมาเกิดขององค์ประกอบ <dialog> ทำให้นักพัฒนาสามารถสร้างไดอะล็อกโดยไม่ต้องใช้ปลั๊กอิน jQuery ได้ง่ายขึ้น แม้ว่า Chrome Canary และ Safari 6.0 จะตีความองค์ประกอบ <dialog> อย่างถูกต้อง แต่ก็มี polyfill ให้เลือกใช้เพื่อให้แน่ใจว่าเบราว์เซอร์อื่นๆ จะสนับสนุนองค์ประกอบดังกล่าว

หากคุณต้องการเรียนรู้เกี่ยวกับคุณสมบัติ HTML5 อื่นๆ คุณอาจต้องการตรวจสอบ Getting to Grips with the HTML5 File API หรือคุณอาจต้องการเรียนรู้เกี่ยวกับแอตทริบิวต์เมนูบริบท HTML5