teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問HTMLでModalを子ウィンドウのように使用したい(modelessのように)

編集履歴

質問編集履歴

13

修正

2021/07/15 06:56

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -244,6 +244,8 @@
244
244
 
245
245
  ```css
246
246
 
247
+ <!-- bodyはbootstrapで使用していると思うので消しました。 -->
248
+
247
249
  .plane-modal {
248
250
 
249
251
  display: none;

12

修正

2021/07/15 06:56

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -36,6 +36,10 @@
36
36
 
37
37
 
38
38
 
39
+ 曖昧な質問ですみませんが、どなたかご教授お願いします。
40
+
41
+
42
+
39
43
  (追記)
40
44
 
41
45
  教えて頂いた方法で試したところ、openを押すとModalは止まっていて、closeは押せるが、Modalをドラッグすると、カーソルに合わせてModalが動いてしまい、Modalのドロップができあない状況です。
@@ -295,9 +299,3 @@
295
299
  }
296
300
 
297
301
  ```
298
-
299
-
300
-
301
-
302
-
303
- 曖昧な質問ですみませんが、どなたかご教授お願いします。

11

修正

2021/07/15 06:55

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -44,6 +44,260 @@
44
44
 
45
45
 
46
46
 
47
+ (追記)
48
+
49
+ Vue.js3 + Bootstrap5で組んだ場合
50
+
51
+
52
+
53
+ ```javascript
54
+
55
+ <div id="app">
56
+
57
+ <div class="row">
58
+
59
+ <div class="col-md-12">
60
+
61
+ <div class="plane-modal-wrap">
62
+
63
+ <button class="plane-modal-open">open</button>
64
+
65
+ </div>
66
+
67
+ </div>
68
+
69
+ </div>
70
+
71
+
72
+
73
+ <div class="plane-modal">
74
+
75
+ <button class="plane-modal-close">close</button>
76
+
77
+ </div>
78
+
79
+ </div>
80
+
81
+
82
+
83
+ <script>
84
+
85
+ const app = Vue.createApp({
86
+
87
+ data() {
88
+
89
+ return {
90
+
91
+
92
+
93
+ }
94
+
95
+ },
96
+
97
+
98
+
99
+ mounted: function () {
100
+
101
+
102
+
103
+ }
104
+
105
+ });
106
+
107
+
108
+
109
+ app.mount("#app");
110
+
111
+
112
+
113
+ // 処理はVue外に書きました。クラス名の取得程度であればVue内でもいいかも
114
+
115
+ // addEventListenerはVue外かな。
116
+
117
+ const open = document.getElementsByClassName("plane-modal-open")[0];
118
+
119
+ const close = document.getElementsByClassName("plane-modal-close")[0];
120
+
121
+ const modal = document.getElementsByClassName("plane-modal")[0];
122
+
123
+ const modalWrap = document.getElementsByClassName("plane-modal-wrap")[0];
124
+
125
+
126
+
127
+ modalWrap.style.height = window.innerHeight + "px";
128
+
129
+
130
+
131
+ open.addEventListener("click", () => {
132
+
133
+ modal.style.display = "block";
134
+
135
+ });
136
+
137
+
138
+
139
+ close.addEventListener("click", () => {
140
+
141
+ modal.style.display = "";
142
+
143
+ });
144
+
145
+
146
+
147
+ let mX;
148
+
149
+ let mY;
150
+
151
+ let dX;
152
+
153
+ let dY;
154
+
155
+
156
+
157
+ modal.onmousedown = (e) => {
158
+
159
+ // クリック時のマウスカーソルX座標
160
+
161
+ mX = e.pageX;
162
+
163
+ // クリック時のマウスカーソルY座標
164
+
165
+ mY = e.pageY;
166
+
167
+ // クリック時の要素のX位置
168
+
169
+ dX = window.pageXOffset + modal.getBoundingClientRect().left
170
+
171
+ // クリック時の要素のY座標
172
+
173
+ dY = window.pageYOffset + modal.getBoundingClientRect().top
174
+
175
+ document.addEventListener("mousemove", onMouseMove);
176
+
177
+ }
178
+
179
+
180
+
181
+ const onMouseMove = (e) => {
182
+
183
+ if (e.pageY < 0 || e.pageY > window.innerHeight || e.pageX < 0 || e.pageX > window.innerWidth) {
184
+
185
+ document.removeEventListener("mousemove", onMouseMove);
186
+
187
+ };
188
+
189
+ const modalWidth = modal.clientWidth;
190
+
191
+ const modalHeight = modal.clientHeight;
192
+
193
+ const shiftX = -(mX - e.pageX);
194
+
195
+ const shiftY = -(mY - e.pageY);
196
+
197
+ if (dX + shiftX < 0) {
198
+
199
+ modal.style.left = "0px";
200
+
201
+ } else if (dX + shiftX + modalWidth > window.innerWidth) {
202
+
203
+ modal.style.left = window.innerWidth - modalWidth + "px";
204
+
205
+ } else {
206
+
207
+ modal.style.left = dX + shiftX + "px";
208
+
209
+ }
210
+
211
+ if (dY + shiftY < 0) {
212
+
213
+ modal.style.top = "0px";
214
+
215
+ } else if (dY + shiftY + modalHeight > window.innerHeight) {
216
+
217
+ modal.style.top = window.innerHeight - modalHeight + "px";
218
+
219
+ } else {
220
+
221
+ modal.style.top = dY + shiftY + "px";
222
+
223
+ }
224
+
225
+ }
226
+
227
+
228
+
229
+ modal.onmouseup = () => {
230
+
231
+ document.removeEventListener("mousemove", onMouseMove);
232
+
233
+ }
234
+
235
+ </script>
236
+
237
+ ```
238
+
239
+
240
+
241
+ ```css
242
+
243
+ .plane-modal {
244
+
245
+ display: none;
246
+
247
+ width: 500px;
248
+
249
+ height: 400px;
250
+
251
+ border: solid 1px black;
252
+
253
+ position: absolute;
254
+
255
+ z-index: 1;
256
+
257
+ background-color: white;
258
+
259
+ top: calc(50% - 200px);
260
+
261
+ left: calc(50% - 250px);
262
+
263
+ }
264
+
265
+
266
+
267
+ .plane-modal-wrap {
268
+
269
+ width: 100%;
270
+
271
+ position: relative;
272
+
273
+ overflow: hidden;
274
+
275
+ top: 0;
276
+
277
+ left: 0;
278
+
279
+ }
280
+
281
+
282
+
283
+ .plane-modal-open {
284
+
285
+ z-index: 0;
286
+
287
+ }
288
+
289
+
290
+
291
+ .plane-modal-close {
292
+
293
+ float: right;
294
+
295
+ }
296
+
297
+ ```
298
+
299
+
300
+
47
301
 
48
302
 
49
303
  曖昧な質問ですみませんが、どなたかご教授お願いします。

10

修正

2021/07/15 06:55

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  (追記)
40
40
 
41
- 教えて頂いた方法で試したところ、openを押すとModalは止まっていて、closeは押せるが、Modalをクリックすると、カーソルに合わせてModalが動いてしまい、Modalを指定位置に置けないです。
41
+ 教えて頂いた方法で試したところ、openを押すとModalは止まっていて、closeは押せるが、Modalをドラッグすると、カーソルに合わせてModalが動いてしまい、Modalのドロップができあない状況です。
42
42
 
43
43
  ![イメージ説明](5c6ce91ada4e5199c7297d6eda0ae5a2.jpeg)
44
44
 

9

修正

2021/07/15 05:14

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  (追記)
40
40
 
41
- 教えて頂いた方法でためしたところ、openを押すとModalは止まっていて、closeは押せるが、Modalをクリックすると、カーソルに合わせてModalが動いてしまい、Modalを指定位置に置けないです。
41
+ 教えて頂いた方法で試したところ、openを押すとModalは止まっていて、closeは押せるが、Modalをクリックすると、カーソルに合わせてModalが動いてしまい、Modalを指定位置に置けないです。
42
42
 
43
43
  ![イメージ説明](5c6ce91ada4e5199c7297d6eda0ae5a2.jpeg)
44
44
 

8

追記

2021/07/15 05:09

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -36,9 +36,11 @@
36
36
 
37
37
 
38
38
 
39
+ (追記)
39
40
 
41
+ 教えて頂いた方法でためしたところ、openを押すとModalは止まっていて、closeは押せるが、Modalをクリックすると、カーソルに合わせてModalが動いてしまい、Modalを指定位置に置けないです。
40
42
 
41
-
43
+ ![イメージ説明](5c6ce91ada4e5199c7297d6eda0ae5a2.jpeg)
42
44
 
43
45
 
44
46
 

7

修正

2021/07/15 05:05

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- HTMLでModalを子ウィンドウ(modeless)のように使用したい
1
+ HTMLでModalを子ウィンドウのように使用したい(modelessのように)
test CHANGED
@@ -1,4 +1,4 @@
1
- HTMLでModalを子ウィンドウ(modeless)のように使用したいです。
1
+ HTMLでModalを子ウィンドウのように使用したい(modelessのように)
2
2
 
3
3
 
4
4
 

6

修正

2021/07/14 03:17

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- HTMLでModalを子ウィンドウのように使用したい
1
+ HTMLでModalを子ウィンドウ(modeless)のように使用したい
test CHANGED
@@ -1,4 +1,4 @@
1
- HTMLでModalを子ウィンドウのように使用したいです。
1
+ HTMLでModalを子ウィンドウ(modeless)のように使用したいです。
2
2
 
3
3
 
4
4
 
@@ -19,8 +19,6 @@
19
19
 
20
20
 
21
21
  イメージとして、Modalにロックをかけず、自由に移動できる感じのことが子ウィンドウです。
22
-
23
- modelessと呼ぶ場合もあるかもしれません。
24
22
 
25
23
 
26
24
 

5

修正

2021/07/14 03:15

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -19,6 +19,8 @@
19
19
 
20
20
 
21
21
  イメージとして、Modalにロックをかけず、自由に移動できる感じのことが子ウィンドウです。
22
+
23
+ modelessと呼ぶ場合もあるかもしれません。
22
24
 
23
25
 
24
26
 

4

修正

2021/07/14 03:15

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,11 @@
20
20
 
21
21
  イメージとして、Modalにロックをかけず、自由に移動できる感じのことが子ウィンドウです。
22
22
 
23
+
24
+
23
- また、ポップアップだと別画面になってしまうので。
25
+ データのやりとり上も、HTML中に埋め込む必要があります。
26
+
27
+ ※別ウィンドウを開いて、そこから情報取得するような方法はありましたが、それは避けたいです、
24
28
 
25
29
 
26
30
 

3

修正

2021/07/14 03:07

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
File without changes

2

修正

2021/07/14 02:59

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,9 @@
18
18
 
19
19
 
20
20
 
21
- イメージとして、Modalにロックをかけず、自由に移動できる感じです。
21
+ イメージとして、Modalにロックをかけず、自由に移動できる感じのことが子ウィンドウです。
22
+
23
+ また、ポップアップだと別画面になってしまうので。
22
24
 
23
25
 
24
26
 
@@ -32,4 +34,10 @@
32
34
 
33
35
 
34
36
 
37
+
38
+
39
+
40
+
41
+
42
+
35
43
  曖昧な質問ですみませんが、どなたかご教授お願いします。

1

修正

2021/07/14 02:58

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  現在の環境として
6
6
 
7
- HTML、javascript、BootStrap5、Vue.jsを使用しています。
7
+ HTML、javascript、BootStrap5、Vue.js3を使用しています。
8
8
 
9
9
 
10
10
 
@@ -15,6 +15,10 @@
15
15
  自分自身のHTMLと、子ウィンドウとは　データのやりとりがあるため、
16
16
 
17
17
  BootStrap5のようにHTML中にModalのHTMLを埋め込む感じで使用したいです。
18
+
19
+
20
+
21
+ イメージとして、Modalにロックをかけず、自由に移動できる感じです。
18
22
 
19
23
 
20
24