jQueryを使ったモーダルウィンドウ : jQuery

投稿日 : 2011年9月10日 | 更新日 : 2012年02月11日 前のページへ戻る

Lightbox風のモーダルウィンドウの簡単さサンプルを作成した際の覚え書き。

» Demo

ソースコード

JavaScript

2011.10.01 IE6で期待する動作をしないので別ウィンドウで画像を表示するコードに変更。

var hasModal = false;
$('a.modal').click(function () {
    if ( $.browser.msie && $.browser.version < 7 ) { // for IE 6
        this.target = "_blank";
    } else {
        if ( !hasModal ) {
            $('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();
        var img = new Image();
        img.src = $(this).attr('href') + '?'+ new Date().getTime(); // (1) new Date().getTime()はIEのキャッシュ対策。必ずImage.onloadを発生させるために必要。
        img.onload = function () { // (2) 画像の幅width, 高さheightを必ず取得するためにImage.onloadの中で取得する。
            var template_dir;
            var scripts = document.getElementsByTagName('script');
            var i = scripts.length;
            while (i--) {
                var match = scripts[i].src.match(/(.+)base.js/);
                if (match) {
                    template_dir = match[1];
                    break;
                }
            }
            $('#modal-front').html('<img src="' + template_dir + 'images/close.png" class="close" /><img src="' + this.src + '" />');
            var left = Math.floor(($(window).width() - this.width) / 2); // (3) 画像の中央は位置
            var top  = Math.floor(($(window).height() - this.height) / 2);
            $('#modal-front').css({
                "z-index" : 20,
                "top": top,
                "left": left
            });
            $('#modal-front').fadeIn('fast');
            $('#modal-front img.close').click(function(){
                $("#modal-back").hide();
                $("#modal-front").hide();
            });
        }
        return false;
    }
});

$(function(){
    var hasModal = false;
    $("a.modal").click(function () {
        if ( !hasModal ) {
            $("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();
        var img = new Image();    // 画像オブジェクト
        img.src = $(this).attr('href') + '?'+ new Date().getTime(); // (1) new Date().getTime()はIEのキャッシュ対策。必ずImage.onloadを発生させるために必要。
        img.onload = function () { // (2) 画像の幅width, 高さheightを必ず取得するためにImage.onloadの中で取得する。
            var left = Math.floor(($(window).width() - this.width) / 2); // (3) 画像の中央は位置
            var top  = Math.floor(($(window).height() - this.height) / 2);
            $('#modal-front').css({
                "top": top,
                "left": left
            });
            $("#modal-front").show();
            $("#modal-front").html("<img src='images/close.png' class='close' /><img src='" + this.src + "' />");
            $("#modal-front img.close").click(function () {
                $("#modal-back").hide();
                $("#modal-front").hide();
            });
        }
        return false;
    });   
});
// 西畑 一馬 ASCII  『Web制作の現場で使う jQueryデザイン入門』(p256)
if ( $.browser.msie && $.browser.version < 7 ) {
    $(window).scroll(function () {
        $('#modal-back').css('top', $(document).scrollTop());
        $('#modal-front').css('top', ($(document).scrollTop() + $(window).height()/2) + 'px');
    });
}

問題点

IE6では期待の動作をしない。

注意点

(1) IEはキャッシュ画像のonloadイベントを発生させない。そのため毎回異なる画像として読み込ませるためにクエリーを工夫(new Data().getTime()する。
(2) Imageのwidth,heightプロパティを必ず取得するためにImageオブジェクトのonloadイベントハンドラ内に記述する。
(3) 画像を中央は位置するコード。

スタイルシート

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:-18px;
    right:-18px;
    cursor:pointer;
}

html, body { height: 100%; }はIE6で表示するのに必要。

JavaScript Custom Program | 固定リンク | Comments (0)

関連記事

• jQueryを使ったページ内スクロール : JQuery
• jQueryを使ったシンプルなドロップダウンナビゲーションプラグイン : jQuery
• jQueryで実現するシンプルなスライドショー : jQuery
• slideUp,slideDownを使ったシンプルな例 : jQuery
• マウスオーバー/アウトによる画像の変更 : jQuery

このページの上へ移動

このページの上へ