Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-settings.php on line 472

Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-settings.php on line 487

Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-settings.php on line 494

Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-settings.php on line 530

Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-includes/cache.php on line 103

Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-includes/query.php on line 21

Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-includes/theme.php on line 623

Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/custom_posts/custom_posts.php on line 22

Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/pukiwiki.php on line 46

Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/pukiwiki.php on line 67

Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/pukiwiki.php on line 75

Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/pukiwiki.php on line 92

Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/modPukiWiki/class/PukiWikiRender.php on line 70

Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/modPukiWiki/class/PukiWikiElement.php on line 181

Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/modPukiWiki/class/PukiWikiElement.php on line 538

Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/modPukiWiki/class/PukiWikiElement.php on line 695

Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/modPukiWiki/class/PukiWikiElement.php on line 1087

Deprecated: Function ereg() is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/wp-ban/wp-ban.php on line 112

Deprecated: Function ereg() is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/wp-ban/wp-ban.php on line 112

Deprecated: Function ereg() is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/wp-ban/wp-ban.php on line 112

Deprecated: Function ereg() is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/wp-ban/wp-ban.php on line 112

Deprecated: Function ereg() is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/wp-ban/wp-ban.php on line 112

Deprecated: Function ereg() is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/wp-ban/wp-ban.php on line 112
[js] 画面全体をオーバーレイする | おれせか
おれせか

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


Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/modPukiWiki/plugin/region.inc.php on line 14

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

必要なもの

サンプル

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 (20)

上野 時計 ブライトリング

[js] 画面全体をオーバーレイする | おれせか

タグホイヤー 女性

[js] 画面全体をオーバーレイする | おれせか

ゼニス 大阪

[js] 画面全体をオーバーレイする | おれせか

[2019/03/23 (土) 20:07]

メンズ腕時計 セイコー xs055j

[js] 画面全体をオーバーレイする | おれせか

ブルガリ デオドラントスティック

[js] 画面全体をオーバーレイする | おれせか

[2019/03/28 (木) 02:29]

ゼニス グランド ポートロワイヤル エル プリメロ クロノグラフ

[js] 画面全体をオーバーレイする | おれせか

[2019/04/02 (火) 12:12]

https://frenchgsbt.exblog.jp/

[js] 画面全体をオーバーレイする | おれせか

メンズ腕時計 カジュアル 意味

[js] 画面全体をオーバーレイする | おれせか

[2019/04/03 (水) 02:27]

スーパーコピー,スーパーコピー時計,ブランド偽物コピーN級品,日本最大級のブランド時計・バッグ・財布N級品専門店

[js] 画面全体をオーバーレイする | おれせか

http://amefcmx.wapsite.me/logo?name=

[js] 画面全体をオーバーレイする | おれせか

[2019/04/27 (土) 14:45]

medicinarf.Ru

[js] 画面全体をオーバーレイする | おれせか

[2019/04/27 (土) 16:49]

ブライトリング クロノマット コピー

[js] 画面全体をオーバーレイする | おれせか

グアム カルティエ時計 レディース

[js] 画面全体をオーバーレイする | おれせか

[2019/04/28 (日) 06:18]

ロンジン 腕時計 ベルト

[js] 画面全体をオーバーレイする | おれせか

ブレゲー ヴァッサーランテ

[js] 画面全体をオーバーレイする | おれせか

[2019/04/30 (火) 06:52]

エルメス時計 電池交換 金額 7回忌

[js] 画面全体をオーバーレイする | おれせか

オーデマピゲ 似てる

[js] 画面全体をオーバーレイする | おれせか

[2019/06/07 (金) 08:21]

タグホイヤー 修理 オーバーホール

[js] 画面全体をオーバーレイする | おれせか

[2019/06/08 (土) 10:30]

スーパーコピーN級品バッグ財布時計販売専門ショップ

[js] 画面全体をオーバーレイする | おれせか

https://clubhorse.exblog.jp/25258785

[js] 画面全体をオーバーレイする | おれせか

[2019/06/20 (木) 08:05]
PAGETOP

Trackback URL

PAGETOP

Search