XHTMLforum - Hintergrund soll abdunkeln wenn Tooltip öffnet (wie Lightbox)

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Hintergrund soll abdunkeln wenn Tooltip öffnet (wie Lightbox) (http://xhtmlforum.de/showthread.php?t=69683)

Hintergrund soll abdunkeln wenn Tooltip öffnet (wie Lightbox)

Hallo :)

ich habe bereits überall gesucht, aber nicht das richtige gefunden, vielleicht geht das auch gar nicht, was ich gern hätte.

Ich bin kein Profi und bitte um Nachsicht, wenn ich etwas falsches Schreibe...

Auf einer neuen Seite soll sich, wenn ein Tooltip öffnet, der Hintergrund der Ganzen Seite abdunkeln (tranzparent, wie z.B. bei einer Lightbox). Dies soll den Text von der eigentlichen Seite hervorheben.

Es ist bisher definiert (CSS,Javascript), das sich ein gestalteter Tooltip öffnet wenn ich z.B. über einen Text fahre, der Inhalt wird aus dem Titletag genommen. (tooltipster)

Vielleicht etwas wirr, aber ich weiß nicht wie ich es anders formulieren soll...

Für Anregungen wäre ich wirklich sehr Dankbar!

Naja sicher geht das mit Javascript.

Was spricht gegen den Einsatz einer Lightbox, bzw. Fancybox als jQuery-Alternative?

Da kannst du doch einfach den entsprechenden Text als Content setzen.

JS Bin - Collaborative JavaScript Debugging

Zitat:

Zitat von vanDerb (Beitrag 531211)

Vielen Dank für die Antwort, aber das funktioniert irgendwie nicht...:?::?:

Du kannst das einfach mit jquery oder javascript (und css) lösen.

Was du aufjedenfall brauchst ist eine #mask (der eigentliche schwarze hintergrund)

HTML-Code:

<div id="mask"></div>

dieser div sollte am ende oder am anfang vom body tag liegen.
das Css sollte ungefähr so ausehen.

Code:

#mask {

        position:absolute;

        z-index:99;

        background-color:#000;

        display:none;

}

Wichtig ist das der z-index höher ist als bei allem anderen außer deinem Tooltip dieser sollte min. z-index:100 haben.

jetzt kommt der eigentliche script Teil

Jquery

Code:

$('#mask').fadeTo("slow",0.8);

das reicht schon um die Mask einzublenden natürlich musst du auch deinen tooltip einblenden und bei mouse leave wieder ausblenden mit

Code:

$("#mask").hide();

Natürlich braucht die Schwarze "Maske" eine Breite die für den Content ausreicht, diesen erreichtst z.B. hiermit:

Code:

var maskHeight = $(document).height();

var maskWidth = $(window).width();

$('#mask').css({'width':maskWidth,'height':maskHeight});

Javascript
Das ein und ausbleden funktioniert hiermit

Einblenden:

Code:

window.document.getElementById('mask').style.display = 'block'

Ausbleden:

Code:

window.document.getElementById('mask').style.display = 'none'

Außerdem solltest du in dem Css noch die transparents einschalten mit

Code:

opacity: 0.8;

Das ist jetzt nur auf die schnelle .. ich weiß nicht ob es dir hilft aber wenn du dazu fragen hast frag einfach

LG

Hut

Hallo Hut,

erst einmal vielen Dank!

Ich habe jetzt eine Fancybox angelegt, funktioniert auch soweit, aber ich bekomme den title tag nicht als Content in die Box...gibt es dafür nicht ein Lösung?? :shock::?:

Bzw. versteh ich irgendwie nicht, wie und wo ich den Javascript und Jquery Code unterbringen soll...:frusty:

Ich bin halt kein Programmierer...:surrende:

Lg

Javascript am besten ans Ende des Body-Tags.

Immer zuerst die jQuery-Bibliothek einbinden, danach Plugins, und erst zum Schluss deinen Custom-Code.

Für den Titel benutzt du am besten das data-Attribut und hängst es am besten direkt vor den Text

JS Bin - Collaborative JavaScript Debugging