回答編集履歴
1
test
CHANGED
|
@@ -32,3 +32,61 @@
|
|
|
32
32
|
<dialog id="d3">3<input type="button" value="close" class="close"></dialog>
|
|
33
33
|
<a href="#d2">d2</a>
|
|
34
34
|
```
|
|
35
|
+
# modal外をクリックして閉じる
|
|
36
|
+
```javascript
|
|
37
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.js"></script>
|
|
38
|
+
<script>
|
|
39
|
+
const openModal=id=>{
|
|
40
|
+
document.querySelector(`dialog`+id)?.showModal();
|
|
41
|
+
}
|
|
42
|
+
window.addEventListener('DOMContentLoaded', ()=>{
|
|
43
|
+
let selector,t;
|
|
44
|
+
if(typeof HTMLDialogElement=="undefined"){
|
|
45
|
+
document.querySelectorAll('dialog').forEach(x=>dialogPolyfill.registerDialog(x));
|
|
46
|
+
}
|
|
47
|
+
document.addEventListener('click',e=>{
|
|
48
|
+
if(t=document.querySelector('dialog[open]')){
|
|
49
|
+
const r=e.target.getBoundingClientRect();
|
|
50
|
+
const rx=r.x;
|
|
51
|
+
const ry=r.y;
|
|
52
|
+
const rw=r.width;
|
|
53
|
+
const rh=r.height
|
|
54
|
+
const px=e.pageX;
|
|
55
|
+
const py=e.pageY;
|
|
56
|
+
const ox=pageXOffset;
|
|
57
|
+
const oy=pageYOffset;
|
|
58
|
+
if(px<rx+ox || px>rx+ox+rw || py<ry+oy || py>ry+oy+rh){
|
|
59
|
+
t.close();
|
|
60
|
+
}else if(!e.target.closest('dialog')){
|
|
61
|
+
t.close();
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
if(selector=e.target.closest('[data-target]')?.dataset.target){
|
|
65
|
+
document.querySelector(selector).showModal();
|
|
66
|
+
}
|
|
67
|
+
if(t=e.target.closest('.close')){
|
|
68
|
+
t.closest('dialog').close();
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
if(selector=location.hash) openModal(selector);
|
|
72
|
+
});
|
|
73
|
+
window.addEventListener('hashchange',()=>{
|
|
74
|
+
openModal(location.hash);
|
|
75
|
+
})
|
|
76
|
+
</script>
|
|
77
|
+
<br><br><br><br><br><br><br><br><br><br><br><br>
|
|
78
|
+
<br><br><br><br><br><br><br><br><br><br><br><br>
|
|
79
|
+
<br><br><br><br><br><br><br><br><br><br><br><br>
|
|
80
|
+
|
|
81
|
+
<input type="button" value="d1" data-target="#d1">
|
|
82
|
+
<input type="button" value="d2" data-target="#d2">
|
|
83
|
+
<input type="button" value="d3" data-target="#d3">
|
|
84
|
+
<dialog id="d1">1<input type="button" value="close" class="close"></dialog>
|
|
85
|
+
<dialog id="d2">2<input type="button" value="close" class="close"></dialog>
|
|
86
|
+
<dialog id="d3">3<input type="button" value="close" class="close"></dialog>
|
|
87
|
+
<a href="#d2">d2</a>
|
|
88
|
+
<br><br><br><br><br><br><br><br><br><br><br><br>
|
|
89
|
+
<br><br><br><br><br><br><br><br><br><br><br><br>
|
|
90
|
+
<br><br><br><br><br><br><br><br><br><br><br><br>
|
|
91
|
+
|
|
92
|
+
```
|