ブラウザのリサイズ時に大きいモーダルだと表示しきれないので、モーダルをスクロールできるようにしたくなったので、サンプルをさくせいした。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>[DEMO]jQueryでスクロールバーの出るモーダルウィンドウを作る方法</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/padolsey-archive/jquery.fn/blob/master/cross-domain-ajax/jquery.xdomainajax.js"></script>
<script>
$(function(){
$(window).bind('beforeunload', function(event) {
var display_state = $( '#modal-target').css('display');
if(display_state === 'block') {
return event.returnValue = "終了してよろしいですか?"
}
});
});
$(function(){
// スクロールバーの横幅を取得
$('html').append('<div class="scrollbar" style="overflow:scroll;"></div>');
var scrollsize = window.innerWidth - $('.scrollbar').prop('clientWidth');
$('.scrollbar').hide();
// 「.modal-open」をクリック
$('.modal-open').click(function(){
$('#modal-open').css('display','block');
// html、bodyを固定(overflow:hiddenにする)
$('html, body').addClass('lock');
// オーバーレイ用の要素を追加
$('body').append('<div class="modal-overlay"></div>');
// オーバーレイをフェードイン
$('.modal-overlay').fadeIn('slow');
// モーダルコンテンツのIDを取得
var modal = '#modal-target';
// モーダルコンテンツを囲む要素を追加
$(modal).wrap("<div class='modal-wrap'></div>");
// モーダルコンテンツを囲む要素を表示
$('.modal-wrap').show();
// モーダルコンテンツの表示位置を設定
modalResize();
// モーダルコンテンツフェードイン
$(modal).fadeIn('slow');
// モーダルコンテンツをクリックした時はフェードアウトしない
$(modal).click(function(e){
e.stopPropagation();
});
// 「.modal-overlay」あるいは「.modal-close」をクリック
$('.modal-wrap, .modal-close').off().click(function(){
// モーダルコンテンツとオーバーレイをフェードアウト
$(modal).fadeOut('slow');
$('.modal-overlay').fadeOut('slow',function(){
// html、bodyの固定解除
$('html, body').removeClass('lock');
// オーバーレイを削除
$('.modal-overlay').remove();
// モーダルコンテンツを囲む要素を削除
$(modal).unwrap("<div class='modal-wrap'></div>");
});
});
// リサイズしたら表示位置を再取得
$(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 - scrollsize - mw) / 2;
$(modal).css({'left': x + 'px','top': 0 + 'px'});
} else if ((mh < h) && (mw > w)) {
var y = (h - scrollsize - 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'});
}
}
});
});
</script>
<style>
body {
margin:10px;
padding:10px;
border:10px solid #ddd;
}
.lock {
overflow:hidden;
}
#modal-target {
display: none;;
position: relative;
width:50%;
border:2px solid #aaa;
background:#fff;
}
.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>
<button class="modal-open">モーダル</button>
<div id="modal-target" class="modal-content">
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p><a class="modal-close">閉じる</a></p>
</div>
</body>
</html>