Skip to content

Instantly share code, notes, and snippets.

@s-hiroshi
Last active Dec 11, 2015
Embed
What would you like to do?
JavaScript > snippets > modal window
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Modal window</title>
<meta name="description" content="DropDown sample">
<meta name="keywords" content="dorpdown">
<link rel="stylesheet" href="style.css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="modal.js"></script>
<style>
div {
margin: 2em;
background: #F0F0EE;
}
</style>
<script>
jQuery(function($) {
$('div').modal();
})
</script>
</head>
<body>
not modal link<br>
<a class="modal" href="images/478x640.jpg">478x460px</a>
<div>
modal link<br>
<a class="modal" href="images/478x640.jpg">478x460px</a>
</div>
<div style="height: 1200px;">
1200px div box
</div>
<div>
modal link<br>
<a class="modal" href="images/478x640.jpg">478x460px</a>
</div>
</body>
</html>
/**
* modal dialog
*
* IE8 and more
* Usage
* $(window).modal();
* $(window).modal('.modal');
* $('div').modal();
* ...
*
* @param {String} className a element class name
*/
jQuery.fn.modal = function(className) {
// this refer to jQuery Object pointed to $('selector')
var parent = (this.selector !== '') ? this.selector : '';
className = className || '.modal';
var hasDialog = false;
return function() {
var identifier;
if (parent !== '') {
identifier = parent + ' ' + 'a' + className;
} else {
identifier = 'a' + className;
}
$(identifier).click(function (e) {
e.preventDefault();
// ダイアログが作成されていないとき作成
if (hasDialog === false) {
$('body').append('<div id="modal-back"></div><div id="modal-front"></div>');
$('#modal-back').click(function () {
$("#modal-back").hide();
$("#modal-front").hide();
});
hasDialog = true;
}
// 背景表示
$('#modal-back').show();
// ダイアログに表示する画像作成
var img = new Image();
// ミリ秒を指定することでImage.onloadイベントを必ず発生させる
// this refer to HTMLAnchorElement
img.src = $(this).attr('href') + '?'+ new Date().getTime();
// 画像をダイアログに表示
$(img).load(function() {
$('#modal-front').html('<div><a class="close" href="#">close</a></div><div><img src="' + this.src + '" /></div>');
// 画像を中央配置
// this refer to HTMLImageElement
// 横
var left = Math.floor(($(window).width() - this.width) / 2);
left = (left < 0) ? 30 : left;
// 縦
// スクロールバーのスクロール量取得
var scroll = $(window).scrollTop();
var top = Math.floor(($(window).height() - this.height) / 2);
top = scroll + ((top < 0) ? 30 : top);
// 画像を配置
$('#modal-front').css({
'position': 'absolute',
'z-index' : 40,
'top': top,
'left': left
});
// モーダルダイアログ表示
$('#modal-front').fadeIn('slow');
// モーダルダイアログを閉じる処理
$('#modal-front .close').click(function(){
$("#modal-back").hide();
$("#modal-front").hide();
return false;
});
});
return false;
});
}();
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment