【jquery】スクロールできるモーダルウインドウの作り方

スクロールできるモーダルウインドウの作り方

以下のページを参考にして、自分の環境用にいじったもの

/////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>[DEMO]jQueryでスクロールバーの出るモーダルウィンドウを作る方法</title>
<script src=”js/jquery.js”></script>
<script>
//スクロールバーの出るモーダルウィンドウ
///////////////////////////////////////////////////////
// スクロールバーの横幅を取得
$(‘html’).append(‘<div class=”scrollbar” style=”overflow:scroll;”></div>’);

//これがスクロールバーの横幅
var scrollbar_width = window.innerWidth – $(window).outerWidth(true);
$(‘.scrollbar’).hide();

var current_scrollY;

// 「.modal-open」がクリックされたら
$(‘.modal-open’).click(function(){

//スクロール済みの距離を取得
current_scrollY = $( window ).scrollTop();

//overflow: ‘hidden’ で下地画面をロックすると、画面が上に戻ってしまうので
//現在地まで移動させる
$( ‘#wrap’ ).css( { top: -1 * current_scrollY } );

//下画面ロック
$( ‘html, body’ ).css( { overflow: ‘hidden’ } );

// オーバーレイ用の要素を追加
$(‘body’).append(‘<div class=”modal-overlay”></div>’);

// オーバーレイをフェードイン
$(‘.modal-overlay’).fadeIn(‘slow’);

// モーダルコンテンツのIDを取得
var modal = ‘#’ + $(this).attr(‘data-target’);

// モーダルコンテンツを囲む要素を追加
$(modal).wrap(“<div class=’modal-wrap’></div>”);

// モーダルコンテンツを囲む要素を表示
$(‘.modal-wrap’).show();

// モーダルコンテンツの表示位置を設定
modalResize();

// モーダルコンテンツフェードイン
$(modal).fadeIn(‘slow’);

// モーダルコンテンツをクリックした時はフェードアウトしない
//「.modal-open」がクリックされたときにはじめてイベントの登録（イベントが起こったとき関数が呼ばれるようにする）
$(modal).click(function(e){
e.stopPropagation();
});

// 「.modal-overlay」あるいは「.modal-close」をクリック
//「.modal-open」がクリックされたときにはじめてイベントの登録（イベントが起こったとき関数が呼ばれるようにする）
$(‘.modal-wrap, .modal-close’).off().click(function(){
// モーダルコンテンツとオーバーレイをフェードアウト
$(modal).fadeOut(‘slow’);
$(‘.modal-overlay’).fadeOut(‘slow’,function(){

// オーバーレイを削除
$(‘.modal-overlay’).remove();

// モーダルコンテンツを囲む要素を削除
$(modal).unwrap(“<div class=’modal-wrap’></div>”);

//モーダルウインドウを開いたときに設定したの current_scrollY を解除
$( ‘#wrap’ ).css( { top: 0 } );

//overflow ‘hidden’ から戻す
$( ‘html, body’ ).css( { overflow: ‘visible’ } );

alert(‘current_scrollY’ + current_scrollY + ‘px’);

//モーダルを表示する前の位置に戻る
$(window).scrollTop(current_scrollY);

});
});

// リサイズしたら表示位置を再取得
$(window).on(‘resize’, function(){
modalResize();
});

// モーダルコンテンツの表示位置を設定する関数
///////////////////////////////////////////////////////
///////////////////////////////////////////////////////
function modalResize(){

// ウィンドウの横幅、高さを取得
var w = $(window).width();
var h = $(window).height();

// モーダルコンテンツの横幅、高さを取得
var mw = $(modal).outerWidth(true);
var mh = $(modal).outerHeight(true);

// モーダルコンテンツの表示位置を設定
if ((mh > h) && (mw > w)) {

$(modal).css({‘left’: 0 + ‘px’,’top’: 0 + ‘px’});

} else if ((mh > h) && (mw < w)) {
var x = (w – scrollbar_width – mw) / 2;
// alert(‘アラート２\nx’ + x + ‘px\nh’ + h + ‘px\nw’ + w + ‘px\nscrollbar_width’ + scrollbar_width + ‘px\nmw(モーダル幅)’ + mw + ‘px\nwindow.innerWidth(垂直スクロールバー（表示されている場合）を含む幅)’ + window.innerWidth + ‘px\nclientWidth’ + $(‘.scrollbar’).prop(‘clientWidth’) + ‘px\ncurrent_scrollY（スクロールした距離）’ + current_scrollY + ‘px’);
$(modal).css({‘left’: x + ‘px’,’top’: 0 + ‘px’});
} else if ((mh < h) && (mw > w)) {

var y = (h – scrollbar_width – mh) / 2;
$(modal).css({‘left’: 0 + ‘px’,’top’: y + ‘px’});

} else {

var x = (w – mw) / 2;
var y = (h – mh) / 2;
$(modal).css({‘left’: x + ‘px’,’top’: y + ‘px’});

} //if

}
///////////////////////////////////////////////////////
///////////////////////////////////////////////////////
//function modalResize ここまで
</script>

.lock {
overflow:hidden;
}

.modal-content {
position:relative;
display:none;
width:50%;
margin:30px;
padding:10px 20px;
border:2px solid #aaa;
background:#fff;
}

.modal-content p {
margin:0;
padding:0;
}

.modal-overlay {
z-index:1;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:120%;
background-color:rgba(0,0,0,0.75);
}

.modal-wrap {
z-index:2;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
}

.modal-open {
color:#00f;
text-decoration:underline;
}

.modal-open:hover {
cursor:pointer;
color:#f00;
}

.modal-close {
color:#00f;
text-decoration:underline;
}

.modal-close:hover {
cursor:pointer;
color:#f00;
}
</style>
</head>
<body>
<a data-target=”con1″ class=”modal-open”>リンク1</a>
<a data-target=”con2″ class=”modal-open”>リンク2</a>
<a data-target=”con3″ class=”modal-open”>リンク3</a>
<a data-target=”con4″ class=”modal-open”>リンク4</a>
<a data-target=”con5″ class=”modal-open”>リンク5</a>

<div id=”con1″ class=”modal-content”>
<p><a href=”./”>リンク1の内容です。</a>・・・</p>
<p><a class=”modal-close”>閉じる</a></p>
</div>
<div id=”con2″ class=”modal-content”>
<p><a href=”./”>リンク2の内容です。</a>・・・</p>
<p><a class=”modal-close”>閉じる</a></p>
</div>
<div id=”con3″ class=”modal-content”>
<p><a href=”./”>リンク3の内容です。</a>・・・</p>
<p><a class=”modal-close”>閉じる</a></p>
</div>
<div id=”con4″ class=”modal-content”>
<p><a href=”./”>リンク4の内容です。</a>・・・</p>
<p><a class=”modal-close”>閉じる</a></p>
</div>
<div id=”con5″ class=”modal-content”>
<p><a href=”./”>リンク5の内容です。</a>・・・</p>
<p><a class=”modal-close”>閉じる</a></p>
</div>
<p>
クリックしてみてください。ウィンドウより大きいモーダルウィンドウにはスクロールバーが出ていると思います。<br>
</p>

</body>
</html>
/////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////