Edit in JSFiddle

/* const open = document.querySelector('#open') */
/* const modal = document.querySelector('#modal') */
const dialog = document.querySelector('#dialog')
const close = dialog.querySelector('.close')
show.addEventListener('click', ()=>dialog.open = true)
/* show.addEventListener('click', ()=>dialog.show()) */
modal.addEventListener('click', ()=>dialog.showModal())
close.addEventListener('click', ()=>dialog.close())

<h2>
Dialog
<button id="show">Show</button>
<button id="modal">Modal</button>
</h2>
<mark>ESC(cancel) 이벤트는 showModal()에서만 된다.<mark>
<pre>
111111111111111111111111111111111111111111111111111
222222222222222222222222222222222222222222222222222
333333333333333333333333333333333333333333333333333333
44444444444444444444444444444444444444444444444444444444
555555555555555555555555555555555555555555555555555555
666666666666666666666666666666666666666666666666666666666666
7777777777777777777777777777777777777
88888888888888888
999999999999999999999999
00000000000000000000000000000000000000000000000000000000000000000000000000000000
</pre>

<dialog id="dialog" open>
  <h3>This is Dialog</h3>
  <p>
    Hello!<br/>
    This is Dialog
  </p>
  <p>
    <button class="close" type="reset"><small>(ESC)</small><big>&times;</big></button>
  </p>
</dialog>

pre {
  font-size: large; line-height: 2em;
}

dialog {
  width: 240px;
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
dialog::backdrop { /* native */
  background-color: green;
  opacity: 0.5;
}
dialog [type=reset] {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 0;
}
big {
  font-weight: bold;
}
}