s-hiroshi/478x640.jpg

## 478x640.jpg

      
    Raw
  

              478x640.jpg
            
          
## index.html
<!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.js
/**
 * 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;
        });

    }();
};
	<!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;
	});

	}();
	};