回答編集履歴
2
サンプルコードの動作確認
test
CHANGED
|
@@ -376,92 +376,104 @@
|
|
|
376
376
|
|
|
377
377
|
```javascript
|
|
378
378
|
|
|
379
|
-
(function($) {
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
// modal-overlay
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
e
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
$("#mo
|
|
412
|
-
|
|
413
|
-
$("#modal-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
$("#
|
|
379
|
+
(function($,window,document) {
|
|
380
|
+
|
|
381
|
+
$.fn.teratail60093ModalWindow = function() {
|
|
382
|
+
|
|
383
|
+
// modal-overlay内にmodal-contentを配置しているためイベントバブルにより、
|
|
384
|
+
|
|
385
|
+
// modal-overlayのクリック(タッチ)イベントが発生してしまうためバブリングを停止させる
|
|
386
|
+
|
|
387
|
+
$("#modal-content").click(function(evt) {
|
|
388
|
+
|
|
389
|
+
evt.stopPropagation();
|
|
390
|
+
|
|
391
|
+
});
|
|
392
|
+
|
|
393
|
+
|
|
394
|
+
|
|
395
|
+
//リサイズされたら、センタリングをする
|
|
396
|
+
|
|
397
|
+
$(window).resize(centeringModalSyncer);
|
|
398
|
+
|
|
399
|
+
|
|
400
|
+
|
|
401
|
+
//ボタンのクリック(タッチ)イベント
|
|
402
|
+
|
|
403
|
+
$(".modal-syncer").click(function() {
|
|
404
|
+
|
|
405
|
+
//ボタンからフォーカスを外す
|
|
406
|
+
|
|
407
|
+
this.blur();
|
|
408
|
+
|
|
409
|
+
//プレイヤー(iframe)のsrcにYouTube動画のURLを設定
|
|
410
|
+
|
|
411
|
+
$("#vimeoPlayer").attr("src", "https://www.youtube.com/embed/" + $(this).data("videoId") + "?autoplay=0");
|
|
412
|
+
|
|
413
|
+
$("#modal-overlay").fadeIn("fast");
|
|
414
|
+
|
|
415
|
+
$("#modal-content img").attr("src", $(this).data("description"));
|
|
416
|
+
|
|
417
|
+
// センタリング
|
|
418
|
+
|
|
419
|
+
centeringModalSyncer();
|
|
420
|
+
|
|
421
|
+
});
|
|
422
|
+
|
|
423
|
+
|
|
424
|
+
|
|
425
|
+
//[#modal-overlay]、または[#modal-close]をクリックしたら…
|
|
426
|
+
|
|
427
|
+
$("#modal-overlay, #modal-close").click(function() {
|
|
428
|
+
|
|
429
|
+
//[#modal-content]と[#modal-overlay]をフェードアウトした後に…
|
|
430
|
+
|
|
431
|
+
$("#modal-overlay").fadeOut("fast", function() {
|
|
432
|
+
|
|
433
|
+
$("#vimeoPlayer").attr("src", ""); // プレイヤーのsrcをクリア
|
|
434
|
+
|
|
435
|
+
});
|
|
436
|
+
|
|
437
|
+
});
|
|
438
|
+
|
|
439
|
+
};
|
|
440
|
+
|
|
441
|
+
|
|
442
|
+
|
|
443
|
+
//センタリングを実行する関数
|
|
444
|
+
|
|
445
|
+
function centeringModalSyncer() {
|
|
446
|
+
|
|
447
|
+
//画面(ウィンドウ)の幅、高さを取得
|
|
448
|
+
|
|
449
|
+
var w = $(window).width();
|
|
450
|
+
|
|
451
|
+
var h = $(window).height();
|
|
452
|
+
|
|
453
|
+
//コンテンツ(#modal-content)の幅、高さを取得
|
|
454
|
+
|
|
455
|
+
var cw = $("#modal-content").outerWidth();
|
|
456
|
+
|
|
457
|
+
var ch = $("#modal-content").outerHeight();
|
|
458
|
+
|
|
459
|
+
//センタリングを実行する
|
|
460
|
+
|
|
461
|
+
$("#modal-content").css({ left: ((w - cw) / 2), top: ((h - ch) / 2) });
|
|
462
|
+
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
|
|
466
|
+
|
|
467
|
+
$(document).ready(function(){
|
|
468
|
+
|
|
469
|
+
$(document).teratail60093ModalWindow();
|
|
432
470
|
|
|
433
471
|
});
|
|
434
472
|
|
|
435
|
-
});
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
//センタリングを実行する関数
|
|
440
|
-
|
|
441
|
-
function centeringModalSyncer() {
|
|
442
|
-
|
|
443
|
-
//画面(ウィンドウ)の幅、高さを取得
|
|
444
|
-
|
|
445
|
-
var w = $(window).width();
|
|
446
|
-
|
|
447
|
-
var h = $(window).height();
|
|
448
|
-
|
|
449
|
-
//コンテンツ(#modal-content)の幅、高さを取得
|
|
450
|
-
|
|
451
|
-
var cw = $("#modal-content").outerWidth();
|
|
452
|
-
|
|
453
|
-
var ch = $("#modal-content").outerHeight();
|
|
454
|
-
|
|
455
|
-
//センタリングを実行する
|
|
456
|
-
|
|
457
|
-
$("#modal-content").css({ left: ((w - cw) / 2), top: ((h - ch) / 2) });
|
|
458
|
-
|
|
459
|
-
}
|
|
460
|
-
|
|
461
|
-
})(window.jQuery);
|
|
473
|
+
})(window.jQuery,window,document);
|
|
462
|
-
|
|
474
|
+
|
|
463
|
-
```
|
|
475
|
+
```
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
476
|
+
|
|
477
|
+
|
|
478
|
+
|
|
467
|
-
こんな感じで動くと思います（
|
|
479
|
+
こんな感じで動くと思います（動作確認済)。
|
1
補足
test
CHANGED
|
@@ -464,4 +464,4 @@
|
|
|
464
464
|
|
|
465
465
|
|
|
466
466
|
|
|
467
|
-
こんな感じで動くと思います。
|
|
467
|
+
こんな感じで動くと思います（たぶん - 動作未確認)。
|