teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問htmlでjavascriptを使ったモーダルウィンドウのような物の作成について

編集履歴

質問編集履歴

3

最新ソースに更新

2017/08/18 11:33

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -46,6 +46,8 @@
46
46
 
47
47
  <body>
48
48
 
49
+ <!--メイン始まり-->
50
+
49
51
  <!--チャットのタイトル-->
50
52
 
51
53
  <div id="title">
@@ -80,7 +82,7 @@
80
82
 
81
83
  <input type="text" id="new_name" value="" maxlength='8'><br>
82
84
 
83
- <input type="button" id="ok" value="ok!">
85
+ <input type="button" id="ok" value="ok!" onclick="closeBox();">
84
86
 
85
87
  </form>
86
88
 
@@ -132,6 +134,12 @@
132
134
 
133
135
  }
134
136
 
137
+ function closeBox(){
138
+
139
+ document.getElementById("nameChanging").style.display="none";
140
+
141
+ }
142
+
135
143
  ```
136
144
 
137
145
  ```css

2

ソースの最新バージョンへの差し替えと問題点の具体化

2017/08/18 11:32

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- htmlでjavascriptを使ったモーダルウィンドウの作成について
1
+ htmlでjavascriptを使ったモーダルウィンドウのような物の作成について
test CHANGED
@@ -10,6 +10,14 @@
10
10
 
11
11
  作っているものはチャット画面のひな形です
12
12
 
13
+ ソースを最新のものに差し替えました
14
+
15
+ <問題点>
16
+
17
+ 名前ボタンを押した時に割り込むように表示され、ずれるのをどうにかしたいのと
18
+
19
+ 表示位置の改善
20
+
13
21
  ```html
14
22
 
15
23
  <!DOCTYPE HTML5>
@@ -38,8 +46,6 @@
38
46
 
39
47
  <body>
40
48
 
41
- <!--メイン始まり-->
42
-
43
49
  <!--チャットのタイトル-->
44
50
 
45
51
  <div id="title">
@@ -60,36 +66,26 @@
60
66
 
61
67
  <input type="button" id="name" value="名前" onclick="nameChange();"><!--下ではないだろうか？-->
62
68
 
63
- <!--
64
-
65
- <span id="naming">
66
-
67
- <input type="button" id="name" value="名前" onclick="nameChange();">
68
-
69
- <span id="nameChanging">
70
-
71
- <span class="nameChange_style">名前の変更</span>
72
-
73
- <form>
74
-
75
- <input type="text" id="new_name" value=""><br>
76
-
77
- <input type="button" id="ok" value="ok!">
78
-
79
- </form>
80
-
81
- </span>
82
-
83
- </span>
84
-
85
- -->
86
-
87
69
  <input type="button" value="メニュー" id="menu"><!--未定(友達追加とかになるはず)-->
88
70
 
89
71
  <input type="button" value="退出" id="exit_room"><br><!--ルームから出る-->
90
72
 
91
73
  </form>
92
74
 
75
+ <div id="nameChanging">
76
+
77
+ <div class="nameChange_style">名前の変更</div>
78
+
79
+ <form>
80
+
81
+ <input type="text" id="new_name" value="" maxlength='8'><br>
82
+
83
+ <input type="button" id="ok" value="ok!">
84
+
85
+ </form>
86
+
87
+ </div>
88
+
93
89
  </div>
94
90
 
95
91
  <!--参加者一覧-->
@@ -110,8 +106,6 @@
110
106
 
111
107
  </div>
112
108
 
113
- <!--メイン終わり-->
114
-
115
109
  </body>
116
110
 
117
111
  </html>
@@ -134,7 +128,7 @@
134
128
 
135
129
  function nameChange(){
136
130
 
137
- document.getElementById("nameChanging");
131
+ document.getElementById("nameChanging").style.display="block";
138
132
 
139
133
  }
140
134
 
@@ -158,12 +152,6 @@
158
152
 
159
153
  }
160
154
 
161
- div#ButtonFace{
162
-
163
- margin-bottom:3px;
164
-
165
- }
166
-
167
155
  div#usernames{
168
156
 
169
157
  width:100%;
@@ -184,6 +172,8 @@
184
172
 
185
173
  background-color:#fafafa;
186
174
 
175
+ margin-top:4px;
176
+
187
177
  /*position:absolute*/
188
178
 
189
179
  }
@@ -198,6 +188,8 @@
198
188
 
199
189
  margin-right:4px;
200
190
 
191
+ margin-top:4px;
192
+
201
193
  }
202
194
 
203
195
  /*メニューボタン用*/
@@ -210,6 +202,8 @@
210
202
 
211
203
  margin-right:4px;
212
204
 
205
+ margin-top:4px;
206
+
213
207
  }
214
208
 
215
209
  /*退出ボタン用*/
@@ -220,7 +214,7 @@
220
214
 
221
215
  background-color:#fafafa;
222
216
 
223
- margin-right:4px;
217
+ margin-top:4px;
224
218
 
225
219
  }
226
220
 
@@ -228,7 +222,7 @@
228
222
 
229
223
  /*モーダルの表示用*/
230
224
 
231
- span#nameChanging{
225
+ div#nameChanging{
232
226
 
233
227
  display:none;
234
228
 
@@ -238,7 +232,7 @@
238
232
 
239
233
  background-color:#fafafa;
240
234
 
241
- width:125px;
235
+ width:127px;
242
236
 
243
237
  height:80px;
244
238
 
@@ -246,28 +240,34 @@
246
240
 
247
241
  /*名前変更のデザイン*/
248
242
 
249
- span.nameChange_style{
243
+ div.nameChange_style{
250
244
 
251
245
  background-color:#87cefa;
252
246
 
253
247
  margin-bottom:4px;
254
248
 
255
- position:relative;
256
-
257
249
  }
258
250
 
259
251
  input#new_name{
260
252
 
261
253
  margin-bottom:5px;
262
254
 
255
+ margin-left:2px;
256
+
263
257
  }
264
258
 
265
259
  input#ok{
266
260
 
261
+ border-style:solid;
262
+
263
+ background-color:#fafafa;
264
+
265
+ border-style:solid;
266
+
267
+ margin-right:5px;
268
+
267
269
  float:right;
268
270
 
269
- margin-right:5px;
270
-
271
271
  }
272
272
 
273
273
  ```

1

作っているものの内容とソースの追加

2017/08/18 09:02

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -3,3 +3,271 @@
3
3
  方法がよくわかりません
4
4
 
5
5
  作ってるものとしての仕様は、ボタンを押すとボタンのすぐ近くorボタンに重なるように出るようにしたいです
6
+
7
+
8
+
9
+ ー追記ー
10
+
11
+ 作っているものはチャット画面のひな形です
12
+
13
+ ```html
14
+
15
+ <!DOCTYPE HTML5>
16
+
17
+ <!--サンプルページ(チャット画面)の作成-->
18
+
19
+
20
+
21
+ <html lang="ja">
22
+
23
+ <head>
24
+
25
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
26
+
27
+ <meta name="viewpoint" content="user-scalable=no">
28
+
29
+ <link rel="stylesheet" type="text/css" href="chat_site_Stationery.css">
30
+
31
+ <title>サンプルのぺーじ</title>
32
+
33
+ <script type="text/javascript" src="chat_site_Stationery.js">
34
+
35
+ </script>
36
+
37
+ </head>
38
+
39
+ <body>
40
+
41
+ <!--メイン始まり-->
42
+
43
+ <!--チャットのタイトル-->
44
+
45
+ <div id="title">
46
+
47
+ サンプルのページ
48
+
49
+ </div>
50
+
51
+ <!--textbox,ボタン類-->
52
+
53
+ <div id="button">
54
+
55
+ <form name="js" id="input_teｘｔ">
56
+
57
+ <input type="text" id="txtb" value="" style="width:100%;"><br>
58
+
59
+ <input type="button" id="say2" value="発言" onclick="talk();"><!--テキストボックス内の文字列を送信-->
60
+
61
+ <input type="button" id="name" value="名前" onclick="nameChange();"><!--下ではないだろうか？-->
62
+
63
+ <!--
64
+
65
+ <span id="naming">
66
+
67
+ <input type="button" id="name" value="名前" onclick="nameChange();">
68
+
69
+ <span id="nameChanging">
70
+
71
+ <span class="nameChange_style">名前の変更</span>
72
+
73
+ <form>
74
+
75
+ <input type="text" id="new_name" value=""><br>
76
+
77
+ <input type="button" id="ok" value="ok!">
78
+
79
+ </form>
80
+
81
+ </span>
82
+
83
+ </span>
84
+
85
+ -->
86
+
87
+ <input type="button" value="メニュー" id="menu"><!--未定(友達追加とかになるはず)-->
88
+
89
+ <input type="button" value="退出" id="exit_room"><br><!--ルームから出る-->
90
+
91
+ </form>
92
+
93
+ </div>
94
+
95
+ <!--参加者一覧-->
96
+
97
+ <div id="usernames">
98
+
99
+ <span>参加者一覧 ｜</span>
100
+
101
+ <!--ここに参加者を取得するスクリプト-->
102
+
103
+ </div>
104
+
105
+ <!--チャット本体-->
106
+
107
+ <div id="chat_log">
108
+
109
+
110
+
111
+ </div>
112
+
113
+ <!--メイン終わり-->
114
+
115
+ </body>
116
+
117
+ </html>
118
+
119
+ ```
120
+
121
+ ```js
122
+
123
+ //say_func
124
+
125
+ function talk(){
126
+
127
+ target = document.getElementById("chat_log");
128
+
129
+ target.innerText = document.forms.input_teｘｔ.txtb.value;
130
+
131
+ }
132
+
133
+ //nameChange_func
134
+
135
+ function nameChange(){
136
+
137
+ document.getElementById("nameChanging");
138
+
139
+ }
140
+
141
+ ```
142
+
143
+ ```css
144
+
145
+ body{
146
+
147
+ background:linear-gradient(#fafafa,#87e7fa);
148
+
149
+ font-size;20px;
150
+
151
+ }
152
+
153
+ div#title{
154
+
155
+ background-color:#87cefa;
156
+
157
+ margin-bottom:3px;
158
+
159
+ }
160
+
161
+ div#ButtonFace{
162
+
163
+ margin-bottom:3px;
164
+
165
+ }
166
+
167
+ div#usernames{
168
+
169
+ width:100%;
170
+
171
+ background-color:#f3f3f3;
172
+
173
+ border-top:1px solid;
174
+
175
+ }
176
+
177
+
178
+
179
+ /*nameボタンデザイン*/
180
+
181
+ input#name{
182
+
183
+ border-style:solid;
184
+
185
+ background-color:#fafafa;
186
+
187
+ /*position:absolute*/
188
+
189
+ }
190
+
191
+ /*発言ボタン用*/
192
+
193
+ input#say2{
194
+
195
+ border-style:solid;
196
+
197
+ background-color:#fafafa;
198
+
199
+ margin-right:4px;
200
+
201
+ }
202
+
203
+ /*メニューボタン用*/
204
+
205
+ input#menu{
206
+
207
+ border-style:solid;
208
+
209
+ background-color:#fafafa;
210
+
211
+ margin-right:4px;
212
+
213
+ }
214
+
215
+ /*退出ボタン用*/
216
+
217
+ input#exit_room{
218
+
219
+ border-style:solid;
220
+
221
+ background-color:#fafafa;
222
+
223
+ margin-right:4px;
224
+
225
+ }
226
+
227
+
228
+
229
+ /*モーダルの表示用*/
230
+
231
+ span#nameChanging{
232
+
233
+ display:none;
234
+
235
+ border-style:solid;
236
+
237
+ border-width:1px;
238
+
239
+ background-color:#fafafa;
240
+
241
+ width:125px;
242
+
243
+ height:80px;
244
+
245
+ }
246
+
247
+ /*名前変更のデザイン*/
248
+
249
+ span.nameChange_style{
250
+
251
+ background-color:#87cefa;
252
+
253
+ margin-bottom:4px;
254
+
255
+ position:relative;
256
+
257
+ }
258
+
259
+ input#new_name{
260
+
261
+ margin-bottom:5px;
262
+
263
+ }
264
+
265
+ input#ok{
266
+
267
+ float:right;
268
+
269
+ margin-right:5px;
270
+
271
+ }
272
+
273
+ ```