zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hintergrund soll abdunkeln wenn Tooltip öffnet (wie Lightbox)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.07.2013, 13:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.07.2013
Beiträge: 3
ostharz-immobilien befindet sich auf einem aufstrebenden Ast
Cool 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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.07.2013, 13:24
Benutzer
neuer user
 
Registriert seit: 18.06.2013
Beiträge: 76
vanDerb befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.07.2013, 16:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.07.2013
Beiträge: 3
ostharz-immobilien befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von vanDerb Beitrag anzeigen
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
Vielen Dank für die Antwort, aber das funktioniert irgendwie nicht...
Mit Zitat antworten
  #4 (permalink)  
Alt 08.07.2013, 17:33
Benutzerbild von Schwarzerhut
Neuer Benutzer
neuer user
 
Registriert seit: 21.06.2013
Beiträge: 22
Schwarzerhut befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 08.07.2013, 20:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.07.2013
Beiträge: 3
ostharz-immobilien befindet sich auf einem aufstrebenden Ast
Standard

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??

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

Ich bin halt kein Programmierer...

Lg
Mit Zitat antworten
  #6 (permalink)  
Alt 09.07.2013, 11:21
Benutzer
neuer user
 
Registriert seit: 18.06.2013
Beiträge: 76
vanDerb befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Stichwörter
css, lightbox darstellung, title tag, tooltip

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
jcarousel + jquery lightbox plugin Thorolf Javascript & Ajax 0 23.02.2011 14:18
inaktiver Hintergrund solange ... bei Lightbox und Co ismx Javascript & Ajax 0 19.02.2009 16:27
Lightbox mit zweiter CSS Datei funktioniert nicht T4ke CSS 12 11.12.2007 20:20
Lightbox 2 wie Lightbox 1 öffnen .wired Javascript & Ajax 3 31.10.2007 23:35
Div Orientierung Leonidus CSS 22 30.05.2007 18:05


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:32 Uhr.