Q&A
ID の取得がわからないのであれば該当する HTML を併記した方がいいと思います。
###前提・実現したいこと
閲覧ありがとうございます。
モーダルを、ウィンドウを開いた瞬間に出すプログラムを組みたいです。
ソースの方、http://coolwebwindow.com/jquery-lab/archives/304 こちらのサイトから拝借しております。
thisに値がうまくはいっていないらしく、ID取得の部分をどういじって良いか分からず、お手上げ状態です。
###該当のソースコード
https://jsfiddle.net/bn8cvmv1/
##試してみたこと
一度、
// モーダルコンテンツのIDを取得
var modal = '#' + $(this).attr('data-target');
の部分を、
var modal = '#con1';
にしてみる･･･を試してみましたがうまくいきませんでした。
まだまだ勉強中です･･･。どうか、ご教示くださるとうれしいです。
HTMLと CSSも質問に挙げてもらうと、回答者にとって何が問題か指摘しやすいと思います。できれば jsFiddle にとりまとめてもらえると、さらに分かりやすいです。
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
jsFiddleにすべてのコードをかいてみました。すみませんがよろしくお願いします
コードを提示してください。
@prg_se jsFiddle への転記、ありがとうございます。
回答2件
0
ベストアンサー
「ウィンドウを開いた瞬間」だけ開くのでしたらこれでいかがでしょうか。
モダールに表示したい内容を含む<div>のidと、
var modal = $('#con1');
に入れるidを合わせてください。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>[DEMO]jQueryでモーダルウィンドウを作る方法</title> 6<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 7</head> 8<body> 9 10<div id="con1" class="modal-content"> 11 <p>モーダルの内容です。モーダルの内容です。</p> 12 <p><a class="modal-close">閉じる</a></p> 13</div> 14 15</body> 16</html>
javascript
1$(function(){ 2 // オーバーレイ用の要素を追加 3 $('body').append('<div class="modal-overlay"></div>'); 4 // オーバーレイをフェードイン 5 $('.modal-overlay').fadeIn('slow'); 6 7 // モーダルコンテンツのIDを取得 8 var modal = $('#con1'); 9 // モーダルコンテンツの表示位置を設定 10 modalResize(); 11 // モーダルコンテンツフェードイン 12 $(modal).fadeIn('slow'); 13 14 // 「.modal-overlay」あるいは「.modal-close」をクリック 15 $('.modal-overlay, .modal-close').off().click(function(){ 16 // モーダルコンテンツとオーバーレイをフェードアウト 17 $(modal).fadeOut('slow'); 18 $('.modal-overlay').fadeOut('slow',function(){ 19 // オーバーレイを削除 20 $('.modal-overlay').remove(); 21 }); 22 }); 23 24 // リサイズしたら表示位置を再取得 25 $(window).on('resize', function(){ 26 modalResize(); 27 }); 28 29 // モーダルコンテンツの表示位置を設定する関数 30 function modalResize(){ 31 // ウィンドウの横幅、高さを取得 32 var w = $(window).width(); 33 var h = $(window).height(); 34 35 // モーダルコンテンツの表示位置を取得 36 var x = (w - $(modal).outerWidth(true)) / 2; 37 var y = (h - $(modal).outerHeight(true)) / 2; 38 39 // モーダルコンテンツの表示位置を設定 40 $(modal).css({'left': x + 'px','top': y + 'px'}); 41 } 42});
投稿2018/01/22 03:40
総合スコア103
0
thisは呼び出し元をさします。上記コードですとwindowになります。
上記のコードを簡単に修正するなら
var modal = '#' + $('.modal-open').attr('data-target')
とすればいいかと。
投稿2018/01/22 02:42
総合スコア29
回答ありがとうございます。
ためしてみましたが、上手にいきませんでした。
エラー箇所としましては、
// モーダルコンテンツフェードイン
$(modal).fadeIn('slow');
の部分と、
// モーダルコンテンツの表示位置を取得
var x = (w - $(modal).Width(true)) / 2;
でした。
あなたの回答
tips
プレビュー
