質問編集履歴

2

追記

2019/03/22 04:28

投稿

yu_6
yu_6

スコア22

test CHANGED
File without changes
test CHANGED
@@ -146,10 +146,10 @@
146
146
 
147
147
 
148
148
 
149
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
150
+
149
151
  <script src="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.js"></script>
150
152
 
151
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
152
-
153
153
  </body>
154
154
 
155
155
  ```
@@ -261,3 +261,75 @@
261
261
  どうしてクリック元の要素が移動してしまうのでしょうか。
262
262
 
263
263
  とても困っています。なにか少しでも情報があれば教えてください。
264
+
265
+
266
+
267
+ ### 現状
268
+
269
+ ![一瞬で消える](f1a5060e6c71c461a9e0bd4f72706877.gif)
270
+
271
+ ```jQuery
272
+
273
+ // そういえばHTMLに#modalという空divを作っていたので
274
+
275
+ $(document).on('click', '.item1', function (event) {
276
+
277
+ $(".item1").click(function (event) {
278
+
279
+ event.preventDefault();
280
+
281
+ $('#modal').iziModal('open', { // #iframe → #modal に変更
282
+
283
+ iframeURL: $(this).data('href')
284
+
285
+ });
286
+
287
+ });
288
+
289
+ $("#modal").iziModal({ // #iframe → #modal に変更
290
+
291
+ iframe: true,
292
+
293
+ width: '98%',
294
+
295
+ iframeHeight: 600,
296
+
297
+ zindex: '110',
298
+
299
+ iframeURL: "data.html",
300
+
301
+ group: 'works',
302
+
303
+ overlayColor: 'rgba(0,0,0,0.1)'
304
+
305
+ });
306
+
307
+ });
308
+
309
+ ```
310
+
311
+ 今はこのような感じです。
312
+
313
+ ① ページ読み込みして1度目はうまく表示されるのですが、閉じて2度目以降はこのように一瞬だけ表示されて消えてしまう。
314
+
315
+
316
+
317
+ ② ページを読み込むとこのように a と b の間に謎の空間が生まれてしまう。(最初のクリックをすると元に戻りますが、気になります)
318
+
319
+
320
+
321
+ ---
322
+
323
+ ![反応しない](7706529ae0c0c7390e4fa916f476da09.gif)
324
+
325
+ ちなみに、③ ページネーションの該当部を付けているとこのように、どこをクリックしてもモーダルが反応しません。
326
+
327
+ 他のJSコードを一つ一つコメントアウトしながら確認しましたが、やはり上述のページネーションの該当部をコメントアウトしないとモーダルウインドウは動作しませんでした。
328
+
329
+
330
+
331
+ モーダルウインドウもページネーションも両方付けたいです。
332
+
333
+
334
+
335
+ 問題が複数になってしまいましたが、何が原因なのでしょうか?

1

タイトルの修正

2019/03/22 04:28

投稿

yu_6
yu_6

スコア22

test CHANGED
@@ -1 +1 @@
1
- モーダルウインドウで、クリック元要素がモーダル側に移動した原因
1
+ クリック元要素がモーダルウインドウ側に移動する場合の対処
test CHANGED
@@ -259,3 +259,5 @@
259
259
 
260
260
 
261
261
  どうしてクリック元の要素が移動してしまうのでしょうか。
262
+
263
+ とても困っています。なにか少しでも情報があれば教えてください。