[POST] native dialog element

[Rplus]

dialog 雖然支援度有點差
( 目前只有 blink 系列支援
http://caniuse.com/#feat=dialog

不過它的行為還蠻好玩的~
就像 native form 一般，屬於有互動功能的元素

可以在這頁玩個一圈就大概知道有哪些趣味的東西了
http://demo.agektmr.com/dialog/

native style

.show() and .close() API

可以簡單控制 show / hide
它會 trigger [open] 這個 attribute

.showModal() API

若改用 showModal 可以有一層半透明的 pseudo-element ::backdrop 壓在後面

::backdrop 可以用 CSS 控制樣式

點擊到 pseudo-element 時，click event 會傳到 dialog 身上
這時可以藉由點擊位置來判斷是不是點在 pseudo-element 上頭~
ref: http://stackoverflow.com/a/30744005/5940513

close event

close 時的參數，可以在 close event 裡用 this.returnValue 拿到~

document.querySelector('#close').onclick = function() {
  var value = document.querySelector('#return_value').value;
  dialog.close(value);
};
document.querySelector('dialog').addEventListener('close', function() {
  alert(this.returnValue);
});

這有點像是在模擬 window.confirm 的功能，
不過 window.confirm / alert / prompt 會影響到整個視窗的操作，很干擾
而用 notification 的話，又太小 & 時間很難控制，再加很難點...
(( 很難點掉真的超煩...

---

ref:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog