HTML <dialog>: 대화상자 요소

<button id="dialog-opener" type="button">장바구니 열기</button>

<dialog id="dialog">
  <ul>
    <li>사과</li>
    <li>옥수수</li>
    <li>파인애플</li>
  </ul>
  <button id="dialog-closer" type="button">닫기</button>
</dialog>

dialog {
  width: 200px;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 2px 6px #0008;
}

dialog::backdrop {
  background: #fff8;
}

ul {
  margin: 0;
}

document.getElementById('dialog-opener').addEventListener('click', function() {
  document.getElementById('dialog').showModal()
})

document.getElementById('dialog-closer').addEventListener('click', function() {
  document.getElementById('dialog').close()
})