DIV Box erscheinen lassen via Link

DaRealAndy

Ich suche nun seit einiger Zeit nach einer Lösung für mein Problem, doch ich komm einfach nicht vorran.

Ich möchte gerne, dass wenn ich auf einen Link klicke in der Mitte des Browsers eine div Box erscheint (Hintergrund alles abgedunkelt).
Und beim Klick auf einen X oder auf den Hintergrund, die Box wieder schließt.

Weiß nicht wo oder wie ich suchen muss..
Danke schonmal im vorraus für alle Antworten

Andy.

synaptic

also was du suchst is ne lightbox
es geht aber auch einfacher...

klick da mal auf den button photo gallery
http://kaninchenrettung.de/kr_en.html

ansonsten hat macrosdesign auch ma ne css-lightbox gemacht..

das javascript von der kaninchenrettungs-page ist folgendes:

Code

jQuery("#close span").ready(function(){
    jQuery("#close span").click(function(){ 
        jQuery("#shadowbox").fadeOut(700);
        jQuery("#shadowbox").animate({ 
            width: "0",
            height:"0"
          }, 1 );
    });
});
jQuery("#gal_btn").ready(function(){
    jQuery("#gal_btn").click(function(){
        var viewportWidth = jQuery(window).width();
        var viewportHeight = jQuery(document).height();
        jQuery("#shadowbox").animate({ 
            width: ""+viewportWidth+"px",
            height:""+viewportHeight+"px"
          }, 1500 );
        jQuery("#picgallery").animate({ 
            width: "850px"
          }, 500 );  

    });
});

Alles anzeigen

HTML

<div id="shadowbox">
    <div id="close">
        <span alt="close gallery" title="close gallery"></span>
    </div>
    <div id="picgallery" style="margin:200px auto 0;" >
    </div>
</div>

edit: nich wundern dass ich als variable zweimal viewport hab...
hatte es zuerst mitm viewport probiert, aber beim scrollen war dann nur die obere hälfte dunkel...

an sich musste für die breite den viewport nehmen und für die höhe die höhe des document

DaRealAndy

Hmm... kenn mich jetzt nicht wirklich mit Javascript aus ..
Und verstehen tu ich das oben geschriebene auch nicht wirklich,
kannst du mir das eventuell ein wenig erklären,
so dass ich z.B anstatt einer Fotogalerie auch ein Text einfügen kann...

Und mit den Link öffnen kann...

Danke erstmal für die schnelle Antwort

synaptic

an sich is das prinzip folgendes: du machst ein separates div, eins was absolut positioniert wird...
dann ziehste das mit nem z-index über deine gesamte seite (dokumentbreite und dokumenthöhe)
in diesem div setzte dann zentriert dein anzeige-div mit hellerem hintergrund und schreibst dort den inhalt rein den du anzeigen möchtest..
dann baruchste noch an einer stelle nen anfasser wo du das ganze ding wieder ausblenden lässt und fertig.

der code ist mit jquery geschrieben.. hatte ich vergessen zu sagen

du kannst auch gern im icq online kommen, dann erklär ich dir des

DaRealAndy

Werde ich anfang nächster Woche drauf zurückkommen
Hab aber ne gute alternative Lösung, die nur mit CSS Funktioniert:

http://www.emanueleferonato.com/2007/08/22/cre…ascript-needed/

klappt bei mir super..

Tobse

Nur mal so nebenbei:
Die sagen: Kein JS-Da is Js drin. Es geht eig. nur Mit JS, wenn mans nich mit ner gedrückten maustaste haben will, wie bei macro ebn.

synaptic

macrosdesign hat ne css lightbox gebaut die ganz normal funktioniert lieber tobse.. da is nix mit gedrückter maustaste oder so... oder hatte der da auch js verbaut drin?

aber ich bin generell auch für die js-varianten, die sind einfach schöner und man kann mit so dollen schwobber-effekten arbeiten und sonstwie animieren usw

Tobse

Von der letzten version ven der ich weiss musste man im opera die maustaste gedrükt halten und im safari beide, ie, ff und chrome ging.

Tags