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

編集履歴

質問編集履歴

13

修正

2021/07/15 06:56

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -121,6 +121,7 @@
121
121
  ```
122
122
 
123
123
  ```css
124
+ <!-- bodyはbootstrapで使用していると思うので消しました。 -->
124
125
  .plane-modal {
125
126
  display: none;
126
127
  width: 500px;

12

修正

2021/07/15 06:56

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -17,6 +17,8 @@
17
17
 
18
18
  もしくはBootStrap5以外の子ウィンドウの方法があれば。
19
19
 
20
+ 曖昧な質問ですみませんが、どなたかご教授お願いします。
21
+
20
22
  (追記)
21
23
  教えて頂いた方法で試したところ、openを押すとModalは止まっていて、closeは押せるが、Modalをドラッグすると、カーソルに合わせてModalが動いてしまい、Modalのドロップができあない状況です。
22
24
  ![イメージ説明](5c6ce91ada4e5199c7297d6eda0ae5a2.jpeg)
@@ -146,7 +148,4 @@
146
148
  .plane-modal-close {
147
149
  float: right;
148
150
  }
149
- ```
151
+ ```
150
-
151
-
152
- 曖昧な質問ですみませんが、どなたかご教授お願いします。

11

修正

2021/07/15 06:55

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -21,5 +21,132 @@
21
21
  教えて頂いた方法で試したところ、openを押すとModalは止まっていて、closeは押せるが、Modalをドラッグすると、カーソルに合わせてModalが動いてしまい、Modalのドロップができあない状況です。
22
22
  ![イメージ説明](5c6ce91ada4e5199c7297d6eda0ae5a2.jpeg)
23
23
 
24
+ (追記)
25
+ Vue.js3 + Bootstrap5で組んだ場合
24
26
 
27
+ ```javascript
28
+ <div id="app">
29
+ <div class="row">
30
+ <div class="col-md-12">
31
+ <div class="plane-modal-wrap">
32
+ <button class="plane-modal-open">open</button>
33
+ </div>
34
+ </div>
35
+ </div>
36
+
37
+ <div class="plane-modal">
38
+ <button class="plane-modal-close">close</button>
39
+ </div>
40
+ </div>
41
+
42
+ <script>
43
+ const app = Vue.createApp({
44
+ data() {
45
+ return {
46
+
47
+ }
48
+ },
49
+
50
+ mounted: function () {
51
+
52
+ }
53
+ });
54
+
55
+ app.mount("#app");
56
+
57
+ // 処理はVue外に書きました。クラス名の取得程度であればVue内でもいいかも
58
+ // addEventListenerはVue外かな。
59
+ const open = document.getElementsByClassName("plane-modal-open")[0];
60
+ const close = document.getElementsByClassName("plane-modal-close")[0];
61
+ const modal = document.getElementsByClassName("plane-modal")[0];
62
+ const modalWrap = document.getElementsByClassName("plane-modal-wrap")[0];
63
+
64
+ modalWrap.style.height = window.innerHeight + "px";
65
+
66
+ open.addEventListener("click", () => {
67
+ modal.style.display = "block";
68
+ });
69
+
70
+ close.addEventListener("click", () => {
71
+ modal.style.display = "";
72
+ });
73
+
74
+ let mX;
75
+ let mY;
76
+ let dX;
77
+ let dY;
78
+
79
+ modal.onmousedown = (e) => {
80
+ // クリック時のマウスカーソルX座標
81
+ mX = e.pageX;
82
+ // クリック時のマウスカーソルY座標
83
+ mY = e.pageY;
84
+ // クリック時の要素のX位置
85
+ dX = window.pageXOffset + modal.getBoundingClientRect().left
86
+ // クリック時の要素のY座標
87
+ dY = window.pageYOffset + modal.getBoundingClientRect().top
88
+ document.addEventListener("mousemove", onMouseMove);
89
+ }
90
+
91
+ const onMouseMove = (e) => {
92
+ if (e.pageY < 0 || e.pageY > window.innerHeight || e.pageX < 0 || e.pageX > window.innerWidth) {
93
+ document.removeEventListener("mousemove", onMouseMove);
94
+ };
95
+ const modalWidth = modal.clientWidth;
96
+ const modalHeight = modal.clientHeight;
97
+ const shiftX = -(mX - e.pageX);
98
+ const shiftY = -(mY - e.pageY);
99
+ if (dX + shiftX < 0) {
100
+ modal.style.left = "0px";
101
+ } else if (dX + shiftX + modalWidth > window.innerWidth) {
102
+ modal.style.left = window.innerWidth - modalWidth + "px";
103
+ } else {
104
+ modal.style.left = dX + shiftX + "px";
105
+ }
106
+ if (dY + shiftY < 0) {
107
+ modal.style.top = "0px";
108
+ } else if (dY + shiftY + modalHeight > window.innerHeight) {
109
+ modal.style.top = window.innerHeight - modalHeight + "px";
110
+ } else {
111
+ modal.style.top = dY + shiftY + "px";
112
+ }
113
+ }
114
+
115
+ modal.onmouseup = () => {
116
+ document.removeEventListener("mousemove", onMouseMove);
117
+ }
118
+ </script>
119
+ ```
120
+
121
+ ```css
122
+ .plane-modal {
123
+ display: none;
124
+ width: 500px;
125
+ height: 400px;
126
+ border: solid 1px black;
127
+ position: absolute;
128
+ z-index: 1;
129
+ background-color: white;
130
+ top: calc(50% - 200px);
131
+ left: calc(50% - 250px);
132
+ }
133
+
134
+ .plane-modal-wrap {
135
+ width: 100%;
136
+ position: relative;
137
+ overflow: hidden;
138
+ top: 0;
139
+ left: 0;
140
+ }
141
+
142
+ .plane-modal-open {
143
+ z-index: 0;
144
+ }
145
+
146
+ .plane-modal-close {
147
+ float: right;
148
+ }
149
+ ```
150
+
151
+
25
152
  曖昧な質問ですみませんが、どなたかご教授お願いします。

10

修正

2021/07/15 06:55

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -18,7 +18,7 @@
18
18
  もしくはBootStrap5以外の子ウィンドウの方法があれば。
19
19
 
20
20
  (追記)
21
- 教えて頂いた方法で試したところ、openを押すとModalは止まっていて、closeは押せるが、Modalをクリックすると、カーソルに合わせてModalが動いてしまい、Modalを指定位置に置けないです。
21
+ 教えて頂いた方法で試したところ、openを押すとModalは止まっていて、closeは押せるが、Modalをドラッグすると、カーソルに合わせてModalが動いてしまい、Modalのドロップができあない状況です。
22
22
  ![イメージ説明](5c6ce91ada4e5199c7297d6eda0ae5a2.jpeg)
23
23
 
24
24
 

9

修正

2021/07/15 05:14

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -18,7 +18,7 @@
18
18
  もしくはBootStrap5以外の子ウィンドウの方法があれば。
19
19
 
20
20
  (追記)
21
- 教えて頂いた方法でためしたところ、openを押すとModalは止まっていて、closeは押せるが、Modalをクリックすると、カーソルに合わせてModalが動いてしまい、Modalを指定位置に置けないです。
21
+ 教えて頂いた方法で試したところ、openを押すとModalは止まっていて、closeは押せるが、Modalをクリックすると、カーソルに合わせてModalが動いてしまい、Modalを指定位置に置けないです。
22
22
  ![イメージ説明](5c6ce91ada4e5199c7297d6eda0ae5a2.jpeg)
23
23
 
24
24
 

8

追記

2021/07/15 05:09

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -17,8 +17,9 @@
17
17
 
18
18
  もしくはBootStrap5以外の子ウィンドウの方法があれば。
19
19
 
20
+ (追記)
21
+ 教えて頂いた方法でためしたところ、openを押すとModalは止まっていて、closeは押せるが、Modalをクリックすると、カーソルに合わせてModalが動いてしまい、Modalを指定位置に置けないです。
22
+ ![イメージ説明](5c6ce91ada4e5199c7297d6eda0ae5a2.jpeg)
20
23
 
21
24
 
22
-
23
-
24
25
  曖昧な質問ですみませんが、どなたかご教授お願いします。

7

修正

2021/07/15 05:05

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- HTMLでModalを子ウィンドウ(modeless)のように使用したい
1
+ HTMLでModalを子ウィンドウのように使用したい(modelessのように)
body CHANGED
@@ -1,4 +1,4 @@
1
- HTMLでModalを子ウィンドウ(modeless)のように使用したいです。
1
+ HTMLでModalを子ウィンドウのように使用したい(modelessのように)
2
2
 
3
3
  現在の環境として
4
4
  HTML、javascript、BootStrap5、Vue.js3を使用しています。

6

修正

2021/07/14 03:17

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- HTMLでModalを子ウィンドウのように使用したい
1
+ HTMLでModalを子ウィンドウ(modeless)のように使用したい
body CHANGED
@@ -1,4 +1,4 @@
1
- HTMLでModalを子ウィンドウのように使用したいです。
1
+ HTMLでModalを子ウィンドウ(modeless)のように使用したいです。
2
2
 
3
3
  現在の環境として
4
4
  HTML、javascript、BootStrap5、Vue.js3を使用しています。
@@ -9,7 +9,6 @@
9
9
  BootStrap5のようにHTML中にModalのHTMLを埋め込む感じで使用したいです。
10
10
 
11
11
  イメージとして、Modalにロックをかけず、自由に移動できる感じのことが子ウィンドウです。
12
- modelessと呼ぶ場合もあるかもしれません。
13
12
 
14
13
  データのやりとり上も、HTML中に埋め込む必要があります。
15
14
  ※別ウィンドウを開いて、そこから情報取得するような方法はありましたが、それは避けたいです、

5

修正

2021/07/14 03:15

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -9,6 +9,7 @@
9
9
  BootStrap5のようにHTML中にModalのHTMLを埋め込む感じで使用したいです。
10
10
 
11
11
  イメージとして、Modalにロックをかけず、自由に移動できる感じのことが子ウィンドウです。
12
+ modelessと呼ぶ場合もあるかもしれません。
12
13
 
13
14
  データのやりとり上も、HTML中に埋め込む必要があります。
14
15
  ※別ウィンドウを開いて、そこから情報取得するような方法はありましたが、それは避けたいです、

4

修正

2021/07/14 03:15

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -9,8 +9,10 @@
9
9
  BootStrap5のようにHTML中にModalのHTMLを埋め込む感じで使用したいです。
10
10
 
11
11
  イメージとして、Modalにロックをかけず、自由に移動できる感じのことが子ウィンドウです。
12
- また、ポップアップだと別画面になってしまうので。
13
12
 
13
+ データのやりとり上も、HTML中に埋め込む必要があります。
14
+ ※別ウィンドウを開いて、そこから情報取得するような方法はありましたが、それは避けたいです、
15
+
14
16
  BootStrap5のリファレンスを見たところそのような機能がなさそうな感じですが。
15
17
 
16
18
  もしくはBootStrap5以外の子ウィンドウの方法があれば。

3

修正

2021/07/14 03:07

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
File without changes

2

修正

2021/07/14 02:59

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -8,11 +8,15 @@
8
8
  自分自身のHTMLと、子ウィンドウとは　データのやりとりがあるため、
9
9
  BootStrap5のようにHTML中にModalのHTMLを埋め込む感じで使用したいです。
10
10
 
11
- イメージとして、Modalにロックをかけず、自由に移動できる感じです。
11
+ イメージとして、Modalにロックをかけず、自由に移動できる感じのことが子ウィンドウです。
12
+ また、ポップアップだと別画面になってしまうので。
12
13
 
13
14
  BootStrap5のリファレンスを見たところそのような機能がなさそうな感じですが。
14
15
 
15
16
  もしくはBootStrap5以外の子ウィンドウの方法があれば。
16
17
 
17
18
 
19
+
20
+
21
+
18
22
  曖昧な質問ですみませんが、どなたかご教授お願いします。

1

修正

2021/07/14 02:58

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,13 +1,15 @@
1
1
  HTMLでModalを子ウィンドウのように使用したいです。
2
2
 
3
3
  現在の環境として
4
- HTML、javascript、BootStrap5、Vue.jsを使用しています。
4
+ HTML、javascript、BootStrap5、Vue.js3を使用しています。
5
5
 
6
6
  ※サーバーサイドについてはここで触れません。
7
7
 
8
8
  自分自身のHTMLと、子ウィンドウとは　データのやりとりがあるため、
9
9
  BootStrap5のようにHTML中にModalのHTMLを埋め込む感じで使用したいです。
10
10
 
11
+ イメージとして、Modalにロックをかけず、自由に移動できる感じです。
12
+
11
13
  BootStrap5のリファレンスを見たところそのような機能がなさそうな感じですが。
12
14
 
13
15
  もしくはBootStrap5以外の子ウィンドウの方法があれば。