พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน dialog Tag

แท็ก <dialog> ใน HTML5 ถูกใช้สำหรับการสร้างกล่องสนทนา (dialog box) เช่น หน้าต่างแจ้งเตือน (alert), หน้าต่างยืนยัน (confirmation dialog), หรือฟอร์มป๊อปอัป (popup form) โดยแท็กนี้สามารถแสดงผลได้ทั้งแบบป๊อปอัปในหน้าเว็บไซต์หรือฝังอยู่ในหน้าเว็บได้เช่นกัน ซึ่ง <dialog> ถูกนำมาใช้เพื่อช่วยให้การสร้างและจัดการกล่องสนทนามีมาตรฐานและง่ายขึ้นใน HTML5

การใช้งานเบื้องต้นของ <dialog>

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dialog Example</title>
</head>
<body>

    <button id="openDialogBtn">Open Dialog</button>

    <dialog id="myDialog">
        <p>This is a dialog box!</p>
        <button id="closeDialogBtn">Close</button>
    </dialog>

    <script>
        const dialog = document.getElementById('myDialog');
        const openDialogBtn = document.getElementById('openDialogBtn');
        const closeDialogBtn = document.getElementById('closeDialogBtn');

        openDialogBtn.addEventListener('click', () => {
            dialog.showModal(); // แสดง dialog แบบ modal (ซึ่งเป็นแบบปิดหน้าจอหลัง dialog)
        });

        closeDialogBtn.addEventListener('click', () => {
            dialog.close(); // ปิด dialog
        });
    </script>

</body>
</html>

อธิบายการใช้งาน

  1. <dialog>: เป็นแท็กหลักที่ใช้สร้างกล่องสนทนา
  2. .showModal(): ใช้ในการแสดงกล่องสนทนาแบบ modal ซึ่งเมื่อแสดงผลแล้วจะไม่สามารถคลิกที่ส่วนอื่นของหน้าเว็บได้จนกว่าจะปิดกล่องสนทนา
  3. .close(): ใช้ในการปิดกล่องสนทนา

การใช้รูปแบบต่าง ๆ ของ <dialog>

กล่องสนทนาแบบ Modal

  • เมื่อใช้เมธอด showModal() กล่องสนทนาจะแสดงผลแบบเต็มจอ ซึ่งทำให้ผู้ใช้ไม่สามารถโต้ตอบกับเนื้อหาอื่นในหน้าเว็บได้จนกว่าจะปิดกล่องสนทนา
HTML
<button onclick="document.getElementById('myDialog').showModal()">Open Modal</button>

<dialog id="myDialog">
  <p>Modal Dialog</p>
  <button onclick="this.closest('dialog').close()">Close</button>
</dialog>

กล่องสนทนาแบบ Non-Modal

  • ใช้เมธอด show() ซึ่งทำให้กล่องสนทนาแสดงผลได้โดยไม่ปิดการโต้ตอบกับหน้าเว็บหลัก
HTML
<button onclick="document.getElementById('myDialog').show()">Open Non-Modal</button>

<dialog id="myDialog">
  <p>Non-Modal Dialog</p>
  <button onclick="this.closest('dialog').close()">Close</button>
</dialog>

กล่องยืนยัน (Confirmation Dialog)

  • การใช้งาน <dialog> สำหรับแสดงข้อความยืนยันก่อนทำการบางอย่าง เช่น ลบข้อมูล
HTML
<button id="deleteBtn">Delete Item</button>

<dialog id="confirmDialog">
  <p>Are you sure you want to delete this item?</p>
  <button id="confirmBtn">Yes</button>
  <button onclick="this.closest('dialog').close()">No</button>
</dialog>

<script>
    const deleteBtn = document.getElementById('deleteBtn');
    const confirmDialog = document.getElementById('confirmDialog');
    const confirmBtn = document.getElementById('confirmBtn');

    deleteBtn.addEventListener('click', () => {
        confirmDialog.showModal(); // เปิดกล่องยืนยัน
    });

    confirmBtn.addEventListener('click', () => {
        // โค้ดลบข้อมูล
        confirmDialog.close();
        alert('Item deleted');
    });
</script>

ฟอร์มในกล่องสนทนา (Form in Dialog)

  • สามารถนำฟอร์มมาใส่ใน <dialog> ได้โดยมีปุ่ม submit และปิดอัตโนมัติหลังจากกด submit
HTML
<button id="openFormDialog">Open Form</button>

<dialog id="formDialog">
  <form method="dialog">
    <label>Name: <input type="text" name="name"></label><br>
    <label>Email: <input type="email" name="email"></label><br>
    <button type="submit">Submit</button>
    <button type="button" onclick="this.closest('dialog').close()">Cancel</button>
  </form>
</dialog>

<script>
    document.getElementById('openFormDialog').addEventListener('click', () => {
        document.getElementById('formDialog').showModal();
    });
</script>

ในตัวอย่างนี้ เมื่อกดปุ่ม Submit ฟอร์มจะส่งข้อมูลไปตามที่ระบุไว้ในแอททริบิวต์ method="dialog" และปิดกล่องสนทนาอัตโนมัติ

คุณสมบัติสำคัญของ <dialog>

  • open attribute: ระบุว่ากล่องสนทนานั้นเปิดอยู่หรือไม่
  • .show() และ .showModal(): เมธอดใช้สำหรับเปิดกล่องสนทนา
  • .close(): เมธอดใช้สำหรับปิดกล่องสนทนา
  • returnValue: ใช้เก็บค่าที่ได้จากฟอร์มที่อยู่ใน <dialog>

การประยุกต์ใช้งาน

  • ใช้สร้าง ป๊อปอัปแจ้งเตือน (Alert) ในหน้าเว็บ
  • ใช้สำหรับ กล่องยืนยัน การดำเนินการ เช่น ลบข้อมูล
  • ใช้ในการสร้าง ฟอร์มสมัครสมาชิก หรือ ฟอร์มติดต่อ
  • ใช้เป็นส่วนของ การแสดงข้อมูลเพิ่มเติม แบบป๊อปอัปในหน้าเว็บ

การใช้แท็ก <dialog> ช่วยให้การจัดการกล่องสนทนาใน HTML5 มีความง่ายและเป็นมาตรฐานขึ้น และสามารถปรับใช้งานได้หลากหลาย

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ