dialog

dialog

์œ ํ˜•
์ฐธ์กฐ๋ฌธ์„œ
์ฃผ์ œ

HTML Dom Api

์ˆœ๋ฒˆ
1
ํƒœ๊ทธ
์„ค๋ช…

๋‚ ์งœ

๐Ÿ”—https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

๋ชจ๋‹ฌํŒ์—…์„ ํƒœ๊ทธ๋กœ ๊ตฌํ˜„ํ• ์ˆ˜ ์žˆ๋‹ค.

esc ํ‚ค ๋ฅผ ๋ˆ„๋ฅด๋ฉด ์ฐฝ๋‹ซ๊ธฐ ๊ธฐ๋Šฅ๋„ ์ง€์› ํ•œ๋‹ค.

  1. ๊ธฐ๋ณธํ˜• ๊ตฌํ˜„
  2. <dialog open>
      <p>์Šคํฌ๋ฆฝํŠธ ์•ˆ์จ๋„ ์ •๋ง ๋œ๋‹ค๊ตฌ?</p>
      <form method="dialog">
        <button>OK</button>
      </form>
    </dialog>

    ์‹คํ–‰ํ™”๋ฉด

    ok๋ฒ„ํŠผ ํด๋ฆญ์‹œ ์ฐฝ์ด ๋‹ซํžŒ๋‹ค.

  3. ์˜ค๋ฒ„๋ ˆ์ด ๋ฐฐ๊ฒฝ์ถ”๊ฐ€
  4. <dialog>
      <button autofocus>Close</button>
      <p>์ด๋ฒˆ์—” ๋ฐฐ๊ฒฝ์ƒ‰ ๋„ฃ๊ธฐ</p>
    </dialog>
    <button>์–์–</button>
    ::backdrop {
      background-image: linear-gradient(
        45deg,
        magenta,
        rebeccapurple,
        dodgerblue,
        green
      );
      opacity: 0.75;
    }

    ::backdrop ์„ ํƒ์ž๋Š” dialog ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ์ƒ‰์„ ์„ ํƒํ• ์ˆ˜ ์žˆ๋‹ค.

    ์•„์ฃผ ์•ฝ๊ฐ„์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค

    const dialog = document.querySelector("dialog");
    const showButton = document.querySelector("dialog + button");
    const closeButton = document.querySelector("dialog button");
    
    // "Show the dialog" button opens the dialog modally
    showButton.addEventListener("click", () => {
      dialog.showModal();
    });
    
    // "Close" button closes the dialog
    closeButton.addEventListener("click", () => {
      dialog.close();
    });

    showModal(), close() ๋Š” dialog api ๊ฐ€ ์ œ๊ณตํ•˜๋Š” ๋ฉ”์„œ๋“œ์ด๋‹ค.

์‹คํ–‰ํ™”๋ฉด