jQuery > moodal window (greater than IE 7)

index.html

<h1>Modal Window</h1>
<ul style="list-style: none">
<li><a href="images/photo1.jpg" class="modal"><img src="images/photo1_thum.jpg" alt="写真1" /></a></li>
<li><a href="images/photo2.jpg" class="modal"><img src="images/photo2_thum.jpg" alt="写真2" /></a></li>
<li><a href="images/photo3.jpg" class="modal"><img src="images/photo3_thum.jpg" alt="写真3" /></a></li>
</ul>

modalwindow.js

/**
* modalwindow.js - v0.0.1 beta
* http://www.info-town.jp
*
* Copyright (c) 2012 Sawai Hiroshi
*/
jQuery(function(){
if (typeof document.body.style.maxWidth!='undefined') {
    var hasModal = false;
    $('a.modal').click(function () {
        var img;
        if (hasModal === false) {
            $("body").append('<div id="modal-back"></div><div id="modal-front"></div>');
            $('#modal-back').click(function () {
                $('#modal-back').hide();
                $('#modal-front').hide();
            });
            hasModal = true;
        }
        $('#modal-back').show();
        img = new Image();
        img.src = $(this).attr('href') + '?'+ new Date().getTime(); // new Date().getTime()はIEのキャッシュ対策。必ずImage.onloadを発生させるために必要。
        img.onload = function () { // 画像の幅width, 高さheightを必ず取得するためにImage.onloadの中で取得する。
            var left = Math.floor(($(window).width() - this.width) / 2);
            var top  = Math.floor(($(window).height() - this.height) / 2);
            $('#modal-front').css({
                'top': top,
                'left': left
            });
            $('#modal-front').show().html('<img src="../images/modalwindow/close.png" class="close" /><img src="' + this.src + '" />');

            $('#modal-front img.close').click(function(){
                $('#modal-back').hide();
                $('#modal-front').hide();
            });
        }
        return false;
    });
}
});

style.css

html, body {
    height:100%; /* for IE 6 削除するとIE6で不具合 */
}
#modal-back{
    display:none;
    position:fixed;
    left:0;
    top:0;
    height:100%;
    width:100%;
    background:black;
    filter:alpha(opacity=60);
    opacity: 0.60;
}
* html #modal-back {
    position: absolute;
}
#modal-front{
    display:none;
    position: fixed;
}
* html #modal-front{
    position: absolute;
}
#modal-front img.close{
    position:absolute;
    top:-10px;
    right:-10px;
    cursor:pointer;
}