Results 1 to 2 of 2

Thread: jQuery Overlay

  1. #1
    dreamworker.de Experte
    Join Date
    07/2009
    Posts
    50

    jQuery Overlay

    Guten Abend zusammen.

    Ich arbeite gerade an einem kurzen Script, welches ein einfaches Overlay erzeugen soll. Ich habe versucht das ganze in ein jQuery Plugin zu packen.

    Code:
    (function ($) {
        $.overlay = {
            init: function () {
                $('body').prepend ('<div id="overlay"></div>').prepend('<div id="overlay-wrapper"><div id="overlay-content"></div></div>');
            },
    
            show: function () {
                $('#overlay').css ({opacity:0}).animate ({opacity:0.5, backgroundColor:'#000000'});
    
                $('#overlay-wrapper').css ({
                    display: 'block',
                    left: ( $(window).width () - $('#overlay-wrapper').width () )/2,
                    top: ( $(window).height () - $('#overlay-wrapper').height () )/2 -20,
                    position: 'absolute'
                });
    
                $('#overlay').css ({
                    display: 'block',
                    width: $(window).width(),
                    height: $(window).height(),
                });
    
                $.overlay.buildHtml ();
            },
    
            hide: function () {
                $('#overlay-wrapper').css ('display', 'none');
                $('#overlay').animate ({opacity:0}, null, null, function() { $(this).hide (); } );
            },
    
            buildHtml: function () {
                var output = '';
                
                output += '<h1>Bitte ausw&auml;hlen ';
                output += '<a href="javascript:void()" id="close">Fenster schlie&szlig;en</a></h1>';
    
                $('#overlay-content').html (output);
            }
        };
    
        $(document).ready (function () {
            $.overlay.init ();
        });
    
    })(jQuery);
    Mit Hilfe des folgenden Codes wird das Öffnen / Schließen gesteuert.

    Code:
    $(document).ready(function () {
    
        $('#addevent').click(function () {
            $.overlay.show ();
        });
    
        $('#close').click (function () {
            $.overlay.hide ();
        });
    
    });
    Das Öffnen des Fenster klappt wunderbar. Das schließen jedoch nicht...

  2. #2
    dreamworker.de Experte
    Join Date
    07/2009
    Posts
    50

    AW: jQuery Overlay

    Anzeigen:
    Webhosting ab 3,99 €
    nach langem ausprobieren: problem gefunden, problem gelöst!

    Code:
    $(document).ready (function () {
    
        $('#addevent').click (function () {
            $.overlay.show ();
        });
    
        $('#close').live ('click', function () {
            $.overlay.hide ();
        });
    
    });

Similar Threads

  1. Problem mit Lightbox 2
    By IronHard in forum Clientseitige Programmierung
    Replies: 7
    Last Post: 19.04.2011, 12:31
  2. JQuery und Ankerpunkte !?
    By Breyton in forum Clientseitige Programmierung
    Replies: 3
    Last Post: 04.02.2010, 20:49
  3. jquery - Bilder untereinander statt Bildwechsel
    By philogyn in forum Clientseitige Programmierung
    Replies: 3
    Last Post: 28.11.2009, 13:26

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •