回答編集履歴

1

調整

2023/03/13 08:55

投稿

yambejp
yambejp

スコア114714

test CHANGED
@@ -1 +1,39 @@
1
1
  dialogを使ったmodalはブロックされにくいです。
2
+
3
+ ```javascript
4
+
5
+ <style>
6
+ #dlg{
7
+ border:0;
8
+ width:1000px;
9
+ height:480px;
10
+ margin:0px;
11
+ padding:0;
12
+ border:outset 2px;
13
+ left:calc(50% - 500px);
14
+ top:calc(50% - 240px);
15
+ }
16
+ </style>
17
+ <script>
18
+ window.addEventListener('DOMContentLoaded', ()=>{
19
+ const noscroll=(e)=>e.preventDefault();
20
+ const scrollEvents=["touchmove","wheel","mousewheel","scroll"];
21
+ scrollEvents.forEach(e=>document.addEventListener(e,noscroll,{passive:false}));
22
+ dlg.showModal();
23
+ document.addEventListener('click',()=>{
24
+ dlg.close();
25
+ });
26
+ dlg.addEventListener('close',()=>{
27
+ scrollEvents.forEach(e=>document.removeEventListener(e,noscroll,{passive:false}));
28
+ });
29
+ });
30
+ </script>
31
+ <dialog id="dlg">
32
+ <img src="http://placeimg.com/1000/480/any" alt="any">
33
+ </dialog>
34
+ <br><br><br><br><br><br><br><br><br><br>1
35
+ <br><br><br><br><br><br><br><br><br><br>2
36
+ <br><br><br><br><br><br><br><br><br><br>3
37
+ <br><br><br><br><br><br><br><br><br><br>4
38
+ <br><br><br><br><br><br><br><br><br><br>5
39
+ ```