以前作成した JavaScript の透明フロートレイヤー

前に MT アップデートした時に一式データが消えてしまったけど、101LAB さんに保管されてた、感謝。忘れないうちに貼付けておきます。

JavaScript
function FloatLayer() {
    this.initialize.apply(this, arguments);
};

FloatLayer.prototype = {

    initialize:function () {},

    add:function () {
        var container = document.createElement("div");
        $(container).attr("id", "floatLayer");
        $(container).css({margin:0, padding:0, background:"none"});
        $(document.body).append(container);
        var input = document.createElement("input");
        $(input).attr("type", "button");
        $(input).attr("value", "クリックで閉じる");
        $(container).append(input);
        $(input).click(function () {
            $("#floatLayer").remove();
        });

        if($.browser.msie) {
            if(!window.XMLHttpRequest || !document.compatMode.match(/CSS/i)) {
                $(container).css({position:"absolute", background:"#000000", filter: "alpha(opacity=50)"});
                this.optimizeScroll();
                $(window).scroll(this.optimizeScroll);
                this.optimizeSize();
                $(window).resize(this.optimizeSize);
            }
        } else {
            $(container).css({width:"100%", height:"100%", position:"fixed", left:0, top:0,
                background:"#000000", opacity: 0.5
            });
        }
    },

    optimizeScroll:function () {
        var scrollLeft = (document.compatMode.match(/CSS/i)) ?
                document.documentElement.scrollLeft : document.body.scrollLeft;
        var scrollTop  = (document.compatMode.match(/CSS/i)) ?
                document.documentElement.scrollTop : document.body.scrollTop;
        $("#floatLayer").css({
            left:scrollLeft,
            top:scrollTop
        });
    },

    optimizeSize:function () {
        var windowWidth = (document.compatMode.match(/CSS/i)) ?
            document.documentElement.clientWidth : document.body.clientWidth;
        var windowHeight = (document.compatMode.match(/CSS/i)) ?
            document.documentElement.clientHeight : document.body.clientHeight;
        $("#floatLayer").width(windowWidth);
        $("#floatLayer").height(windowHeight);
    }
};

var floatLayer = new FloatLayer();
floatLayer.add();

Leave a Reply