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:
|
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> das Css sollte ungefähr so ausehen. Code:
#mask { jetzt kommt der eigentliche script Teil Jquery Code:
$('#mask').fadeTo("slow",0.8); Code:
$("#mask").hide(); Code:
var maskHeight = $(document).height(); Das ein und ausbleden funktioniert hiermit Einblenden: Code:
window.document.getElementById('mask').style.display = 'block' Code:
window.document.getElementById('mask').style.display = 'none' Code:
opacity: 0.8; 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 |
Alle Zeitangaben in WEZ +2. Es ist jetzt 10:53 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023