jQuery Overlay

jQuery Overlay

Einfaches jQuery Overlay

Das Overlay hat eine vertikale und horizontale Zentrierung. Bei Anpassung der Fensterbreite und -höhe wird diese neu berechnet. Bei geringer Browserhöhe scrollt die Seite nach oben und position:fixed wird in position:absolute geändert damit das Overlay funktional bleibt. Schließen mit [esc], Klick auf den Hintergrund oder den x-Button. Es wird nur eine feste Breite benötigt, die Höhe ist variabel.

Beispiel
Einfach auf die Suche klicken oder hier.

HTML-Struktur

<div id="overlaybg" style="display: none;"></div>
<div id="overlay" style="display: none;">
    <div class="content">
        <p class="title">Title</p>

        CONTENT
                        
        <div class="closeoverlay" title="Overlay schließen">x</div>
    </div>
</div>

CSS

<style type="text/css">
#overlaybg {
    position: fixed;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .5;
    filter:alpha(opacity = 50);
    cursor: not-allowed;
}
#overlay {
    position: fixed;
    z-index: 99999;
    background: #eee;
    border: 1px solid #000;
    border-radius: 10px;
    box-shadow: 0 0 30px #000;
    font-size: 16px;
    line-height: 22px;
}
#overlay .content {padding: 16px;}
#overlay .closeoverlay {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 2px;
    cursor: pointer;
}
</style>

JavaScript

<script type="text/javascript">
(function( $ ) {

    $.fn.overlay = function( options ) {

        var overlay = "overlay";
        var overlaybackground = "overlaybg";

        var ie6 = false;
        if ($.browser.msie == true && $.browser.version == '6.0') {
            ie6 = true;
        }

        function center_overlay_x() {
            var browser_width = document.documentElement.offsetWidth;
            if ((browser_width < $("#" + overlay).outerWidth() + 40) && !ie6) {
                $("#" + overlay).css({
                    'position': 'absolute',
                    'left': '10px',
                    'margin-left': '10px'
                })
            } else {
                $("#" + overlay).css({
                    'position': 'fixed',
                    'left': '50%',
                    'margin-left': - $("#" + overlay).outerWidth() / 2
                })
            }
        }

        function center_overlay_y() {
            var browser_height = document.documentElement.offsetHeight;

            if ((browser_height > $("#" + overlay).height() + 40) && !ie6) {
                $("#" + overlay).css({
                    'position': 'fixed',
                    'top': browser_height / 2 - $("#" + overlay).height() / 2
                })
            } else {
                $("#" + overlay).css({
                    'position': 'absolute',
                    'top': '20px'
                });
                $(window).scrollTop(0);
            }
        }

        function overlayposition() {
            center_overlay_x();
            center_overlay_y();
            if(ie6) {
                $("#" + overlaybackground).css({
                    'position': 'absolute',
                    'width': $("body").outerWidth(),
                    'height': document.documentElement.offsetHeight
                });
            }
        }

        $(window).resize(function () {
            overlayposition();
        });

        function overlayclose() {
            $("#" + overlay + "," + "#" + overlaybackground).hide();
        }

        $(document).keydown(function (e) {
            if(e.keyCode == 27) {
                overlayclose();
            }
        });

        $("#" + overlaybackground).live("click", function(){
            overlayclose();
        });

        $("#" + overlay + " .closeoverlay").live("click", function(){
            overlayclose();
        });

        $("#" + overlay + "," + "#" + overlaybackground).show();
        overlayposition();

    };

})( jQuery );

/* Aufruf */
$.fn.overlay();
</script>

Für dieses Overlay wird jQuery benötigt.

Impressum