おれせか

なんかそれっぽいのをうにうに。

画面全体のオーバーレイ表示をするやつ。
毎回書いたりコピペすんのが面倒になってきたのでクラスにしてみた。

必要なもの

サンプル

http://ichi.fool.jp/test/js/jquery/overlay/overlay.html

使い方

var o1 = new $.overlay(); // オーバーレイを用意。
$('#btn01').click(function(){ //#btn01をクリックしたら~。
    o1.open(); //さっき用意したオーバーレイを表示させるよ。
});

newでインスタンスつくったらオーバーレイのdivがbody最下部に非表示で挿入されます。
で、あとはメソッド(open/close)を使っていじいじしてください。

いろんな使い方はサンプル参照で。

オプション(『new $.overlay()』のね。)

bg_color(デフォルト:"#000000")
オーバーレイの色。ご随意に。
opacity(デフォルト:0.5)
オーバーレイの透明度。0(完全に透明)から1(完全に不透明)の間で設定。
fade_speed(デフォルト:400)
fadeIn/fadeOutの所要時間。単位はミリ秒。
overlay_class(デフォルト:"pageOverlay")
オーバーレイのdivタグにつけられるクラス名&IDのprefix。
自前のクラスとかぶって困るとかじゃない限りいじんなくていいと思う。
click_close(デフォルト:true)
true|falseか、this.closeへの引数(引数が複数なら配列で)を設定。
これがtrueか引数だと、開いたオーバーレイをクリックでそれ自身が閉じられる。

メソッド

open([speed] [, callback])
speedでfadeInのスピードを。(無ければfade_speedが適用)
callbackでfadeIn終了時の動作を。
speed無しのcallbackだけの指定もok。
close([speed] [, callback])
speedでfadeOutのスピードを。(無ければfade_speedが適用)
callbackでfadeOut終了時の動作を。
speed無しのcallbackだけの指定もok。

ソース

(function($){//BEGIN $ = jQuery
    
    //$.pageSize使うよ。なきゃここで。
    $.pageSize = $.pageSize || function(){
        var xScroll, yScroll;
        if(window.innerHeight && window.scrollMaxY){
            xScroll = window.innerWidth + window.scrollMaxX;
            yScroll = window.innerHeight + window.scrollMaxY;
        }else if(document.body.scrollHeight > document.body.offsetHeight){
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        }else{
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }
        
        var windowWidth, windowHeight;
        if(self.innerHeight) {
            if(document.documentElement.clientWidth){
                windowWidth = document.documentElement.clientWidth;
            } else {
                windowWidth = self.innerWidth;
            }
            windowHeight = self.innerHeight;
        }else if(document.documentElement && document.documentElement.clientHeight){
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        }else if(document.body){
            windowWidth = document.body.clientWidth;
            windowHeight = document.body.clientHeight;
        }
        
        var pageWidth = xScroll < windowWidth ? xScroll : windowWidth;
        var pageHeight = yScroll < windowHeight ? windowHeight : yScroll;
        
        return [pageWidth,pageHeight,windowWidth,windowHeight];
    };
    
    //initialize
    $.overlay = function(settings){
        var _this = this;
        settings = $.extend({
              bg_color: "#000000"
            , opacity: 0.5
            , fade_speed: 400
            , overlay_class: "pageOverlay"
            , click_close: true // true|falseか、this.closeへの引数(引数が複数なら配列で)。
        }, settings);
        var click_close = settings.click_close;
        
        var pageSize = $.overlay.pageSize = $.pageSize();
        
        this.fade_speed = settings.fade_speed;
        this.opacity = settings.opacity;
        this.overlay_id = settings.overlay_class + $.overlay.uid++;
        this.click_close = settings.click_close;
        this.$select;
        this.opend = false;
        
        //overlay
        var $overlay = this.$obj = $('<div></div>').attr({
                  'class': settings.overlay_class
                , id: this.overlay_id
            }).css({
                  display:            "none"
                , width: pageSize[2]
                , height: pageSize[1]
                , position:            "absolute"
                , top:                0
                , left:                0
                , backgroundColor:    settings.bg_color
                , opacity:            0
            });
        $overlay.appendTo($('body'));
        $.overlay.$objs = $.overlay.$objs.add($overlay);
        
        //click_close
        if(click_close){
            $overlay.click(function(){
                if(click_close === true){
                    _this.close();
                }else{
                    _this.close.apply(_this, $.makeArray(click_close));
                }
            });
        }
        
        //onresize
        $(window).unbind('resize.overlay_resize').bind('resize.overlay_resize', function(){
            pageSize = $.overlay.pageSize = $.pageSize();
            $.overlay.$objs.css({
                width: pageSize[2],
                height: pageSize[1]
            });
        });
    }
    
    //uid
    $.overlay.uid = 0;
    
    //jQuery objects
    $.overlay.$objs = $([]);
    
    //pageSize
    $.overlay.pageSize = [];
    
    //prototype
    $.overlay.prototype = {
        //open
          open: function(speed, callback){
            var _this = this;
            var $overlay = this.$obj;
            this.$select = $('select:visible').hide();
            if(!callback && $.isFunction(speed)){
                callback = speed;
                speed = null;
            }
            $overlay
                .show()
                .fadeTo(speed || this.fade_speed, this.opacity, function(){
                    _this.opend = true;
                    if(callback && $.isFunction(callback)) callback.apply(this, arguments);
                });
        }
        //close
        , close: function(speed, callback){
            var _this = this;
            if(_this.opend){
                var $overlay = this.$obj;
                var $select = this.$select;
                if(!callback && $.isFunction(speed)){
                    callback = speed;
                    speed = null;
                }
                _this.opend = false;
                $overlay
                    .stop()
                    .fadeTo(speed || this.fade_speed, 0, function(){
                        $overlay.hide();
                        $select.show();
                        if(callback && $.isFunction(callback)) callback.apply(this, arguments);
                    });
            }
        }
    };
    
    
})(jQuery);//END $ = jQuery
PAGETOP
PAGETOP
PAGETOP

Comments (16)

初めまして、ご質問させて下さい。
たとえば、サイトにアクセスしたときにオーバーレイになって文章が入るようにはできますか。
onloadみたいな
どうぞ宜しくお願いします。

sarc
[2010/07/09 (金) 05:17]

しばらくサイト放置しておりましたのでいまさらかもしれませんが・・・

jQueryでのonload的なものというと、.ready()というのがあります。
popup開くところまででしたら、

$(document).ready(function(){
$o1 = new $.overlay();
$o1.open(function(){ここに色々callbackの処理かく。});
});

または、よく使われる省略形で以下のような形でも可能です。
$(function(){
$o1 = new $.overlay();
$o1.open(function(){ここに色々callbackの処理かく。});
});

文章出したりといった部分はopenの引数のcallback内で色々js書いてもらうことになるかと思います。
このあたりはやりたいこと次第だと思いますので、サンプルの1番最後のものや、以下のサイトあたりを参考にしつつ色々試してみて頂ければと思います。
http://www.tohoho-web.com/js/index.htm
http://semooh.jp/jquery/

ichi
[2010/07/26 (月) 19:36]

Rather interesting. Has few times re-read for this purpose to remember. Thanks for interesting article. Amy.

[2010/08/14 (土) 11:11]

はじめまして。
オーバーレイする方法を探していたらたどりつきました。
ぜひ、このクラスを利用したいのですが、ライセンスはどうなってますでしょうか?

k2
[2010/11/16 (火) 21:52]

>k2さん
特にライセンスとか考えてないので、ご自由に使ったり改造したりしちゃってくださいませ。ただし無保障でございます。

ざっとライセンスについて調べてみたかんじ、MITみたいなかんじでしょか。
そもそも著作権表示ないので若干ちがう気もしますが。

ichi
[2010/11/17 (水) 15:18]

画面中央にこのボックスが表示されるサンプルで、ポップアップされたウィンドウ内でスクロールができるようにしたいのですが、どうしたらよいものか、と困っております。

メガネ
[2013/06/25 (火) 12:17]

not to say that employers aren’t looking for them; they are. But the numbers show that old-guard certifications are stil

[2015/08/13 (木) 16:35]

macだとコピーとペーストのコマンドがそれぞれ『pbcopy』と『pbpaste』なので、
変換したい文字列をコピーして、

[2015/09/16 (水) 13:06]

l直書きでネスト作るこ

[2015/10/13 (火) 17:13]

シャネル激安は近いうちに全く新しいのを発表して制限してシリーズを設計します。

シリーズの中ですべて設計がすべてきつくてすぐの流行っている傾向を貼って、
シャネル激安http://www.cctoh.com/
また(まだ)異なる風格の組み合わせ自由を行うことができます。
シャネルバッグ
シャネル財布
シャネル腕時計
シャネルピアス
シャネル眼鏡
シャネル靴
今おしゃれな女性ネットのファッションに従って小さくいっしょにシャネルが新しく制限して袋、
シャネル激安シリーズを包みを見てみに来を編みましょう!

[2015/12/01 (火) 18:38]

生气是拿别人做错的事来惩罚自己。

[2015/12/31 (木) 17:15]

画面全体のオーバーレイ表示をするやつ。
毎回書いたりコピペすんのが面倒になってきたのでクラスにしてみた。

[2016/01/06 (水) 18:11]

宝のスーパーコピーめでたい(ミュウミュウ)。

[2016/01/15 (金) 17:45]

amazing article and interesting content and it is amazing to learn and read

[2016/06/15 (水) 23:39]

true|falseか、this.closeへの引数(引数が複数なら配列で)を設定。
これがtrueか引数だと、開いたオーバーレイをクリックでそれ自身が閉じられる。

[2016/06/20 (月) 12:22]

宝のスーパーコピーめでたい(ミュウミュウ)。

[2016/06/27 (月) 18:39]
PAGETOP

Comment Form

PAGETOP

Trackbacks (0)

トラックバックはありません。

PAGETOP

Trackback URL

PAGETOP

Search