「ウィンドウを開いた瞬間」だけ開くのでしたらこれでいかがでしょうか。
モダールに表示したい内容を含む<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});