質問編集履歴

4

タグの修正

2018/04/27 14:10

投稿

science_mac
science_mac

スコア29

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- ```PHP
19
+ ```HTML
20
20
 
21
21
  ...
22
22
 

3

情報の追加

2018/04/27 14:10

投稿

science_mac
science_mac

スコア29

test CHANGED
File without changes
test CHANGED
@@ -72,4 +72,244 @@
72
72
 
73
73
 
74
74
 
75
+ モーダルウィンドウ自体は以下のように実装しています。
76
+
77
+ ```HTML
78
+
79
+ <!-- ここからモーダルウィンドウ -->
80
+
81
+ <div id="modal-content">
82
+
83
+ <!-- モーダルウィンドウのコンテンツ開始 -->
84
+
75
- ちなみに上の実装で動かすと、チェックボックスの値がモーダルウィンドウのテキストボックス入力されるとこまはうですが、OKボタンクリックしも特に何も起きな...といった状態です
85
+ <p>モーダルウィンドウのコンンツをHTMLで自由編集すす。画像や、画埋め込みなど、お好きなものを入れ下さい。</p>
86
+
87
+ <p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
88
+
89
+ <p><a id="modal-close" class="button-link">閉じる</a></p>
90
+
91
+ <!-- モーダルウィンドウのコンテンツ終了 -->
92
+
93
+ </div>
94
+
95
+
96
+
97
+ <p><a id="modal-open" class="button-link">クリックするとモーダルウィンドウを開きます。</a></p>
98
+
99
+ <!-- ここまでモーダルウィンドウ -->
100
+
101
+ ```
102
+
103
+
104
+
105
+
106
+
107
+ ```CSS
108
+
109
+ #modal-content{
110
+
111
+ width:50%;
112
+
113
+ margin:1.5em auto 0;
114
+
115
+ padding:10px 20px;
116
+
117
+ border:2px solid #aaa;
118
+
119
+ background:#fff;
120
+
121
+ z-index:2;
122
+
123
+ position:fixed;
124
+
125
+ display:none;
126
+
127
+ overflow: auto;
128
+
129
+ max-height: calc(100vh - 1.5em);
130
+
131
+ }
132
+
133
+
134
+
135
+ .button-link{
136
+
137
+ margin-left : 60px;
138
+
139
+ text-align:center;
140
+
141
+ -moz-border-radius: 5px;
142
+
143
+ -webkit-border-radius: 5px;
144
+
145
+ border-radius: 5px;
146
+
147
+ }
148
+
149
+
150
+
151
+ .button-link:hover{
152
+
153
+ cursor:pointer;
154
+
155
+ color:#f00;
156
+
157
+ }
158
+
159
+
160
+
161
+ #modal-overlay{
162
+
163
+ z-index:1;
164
+
165
+ display:none;
166
+
167
+ position:fixed;
168
+
169
+ top:0;
170
+
171
+ left:0;
172
+
173
+ width:100%;
174
+
175
+ height:120%;
176
+
177
+ background-color:rgba(0,0,0,0.75);
178
+
179
+ overflow: auto;
180
+
181
+ }
182
+
183
+
184
+
185
+ ```
186
+
187
+
188
+
189
+ ```JavaScript
190
+
191
+ <!-- モーダルウィンドウ実装用 -->
192
+
193
+ <script>
194
+
195
+ jQuery(function($){
196
+
197
+
198
+
199
+ //モーダルウィンドウを出現させるクリックイベント
200
+
201
+ $("#modal-open").click( function(){
202
+
203
+
204
+
205
+ //キーボード操作などにより、オーバーレイが多重起動するのを防止する
206
+
207
+ $( this ).blur() ; //ボタンからフォーカスを外す
208
+
209
+ if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない (防止策1)
210
+
211
+ //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する (防止策2)
212
+
213
+
214
+
215
+ //オーバーレイを出現させる
216
+
217
+ $( "body" ).append( '<div id="modal-overlay"></div>' ) ;
218
+
219
+ $( "#modal-overlay" ).fadeIn( "slow" ) ;
220
+
221
+
222
+
223
+ //コンテンツをセンタリングする
224
+
225
+ centeringModalSyncer() ;
226
+
227
+
228
+
229
+ //コンテンツをフェードインする
230
+
231
+ $( "#modal-content" ).fadeIn( "slow" ) ;
232
+
233
+
234
+
235
+ //[#modal-overlay]、または[#modal-close]をクリックしたら…
236
+
237
+ $( "#modal-overlay,#modal-close" ).unbind().click( function(){
238
+
239
+
240
+
241
+ //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
242
+
243
+ $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
244
+
245
+
246
+
247
+ //[#modal-overlay]を削除する
248
+
249
+ $('#modal-overlay').remove() ;
250
+
251
+
252
+
253
+ } ) ;
254
+
255
+
256
+
257
+ } ) ;
258
+
259
+
260
+
261
+ } ) ;
262
+
263
+
264
+
265
+ //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
266
+
267
+ $( window ).resize( centeringModalSyncer ) ;
268
+
269
+
270
+
271
+ //センタリングを実行する関数
272
+
273
+ function centeringModalSyncer() {
274
+
275
+
276
+
277
+ //画面(ウィンドウ)の幅、高さを取得
278
+
279
+ var w = $( window ).width() ;
280
+
281
+ var h = $( window ).height() ;
282
+
283
+
284
+
285
+ // コンテンツ(#modal-content)の幅、高さを取得
286
+
287
+ // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
288
+
289
+ // var cw = $( "#modal-content" ).outerWidth( {margin:true} );
290
+
291
+ // var ch = $( "#modal-content" ).outerHeight( {margin:true} );
292
+
293
+ var cw = $( "#modal-content" ).outerWidth();
294
+
295
+ var ch = $( "#modal-content" ).outerHeight();
296
+
297
+
298
+
299
+ //センタリングを実行する
300
+
301
+ $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;
302
+
303
+
304
+
305
+ }
306
+
307
+
308
+
309
+ } ) ;
310
+
311
+
312
+
313
+ </script>
314
+
315
+ ```

2

処理結果について追記

2018/04/27 12:09

投稿

science_mac
science_mac

スコア29

test CHANGED
File without changes
test CHANGED
@@ -69,3 +69,7 @@
69
69
  試しにJavaScript組んでみたのですが、うまくいかず...
70
70
 
71
71
  どうかご教授お願いします。
72
+
73
+
74
+
75
+ ちなみに上の実装で動かすと、チェックボックスの値がモーダルウィンドウ内のテキストボックスに入力されるとこまではうまく動くのですが、OKボタンをクリックしても特に何も起きない...といった状態です。

1

書式の修正

2018/04/27 11:21

投稿

science_mac
science_mac

スコア29

test CHANGED
File without changes
test CHANGED
@@ -52,11 +52,11 @@
52
52
 
53
53
  function OK() {
54
54
 
55
- ('$ok').click(function OK()) {
55
+ ('$ok').click = function OK() {
56
56
 
57
57
  var search_material = document.getElementById('keyword');
58
58
 
59
- ('$front_searchfield').value = search_material;
59
+ ('$front_searchfield').value == search_material;
60
60
 
61
61
  }
62
62