Popup Fenster ohne Javascript?!

[b1zarRe]

Hi,

ich hoffe ihr könnt mir weiterhelfen:

Ich möchte in eine Webseite ein kleines Popup einbauen, welches
im gleichen Fenster erscheinen soll. Nun stellt sich mir die Frage, ob
ich dies per Javascript realisieren sollte (-> Da ein Nutzer ja selbst
entscheiden kann ob JS an/aus ist und dann würde das Popup ja garnicht
mehr funktionieren?!).

ODER

ob ich alles per HTML/CSS realisiere, indem ich einen div baue, welcher
erscheint, wenn man ein jeweiligen button klickt und verschwindet, wenn
man in dem div auf ein "X" Button klickt? => So ein bisschen wie eine Navi,
nur halt mit Button.

Welches wäre die bessere Lösung? Oder gibt es noch eine andere?

Vielen Dank!

 

[Tronjer]

ob ich alles per HTML/CSS realisiere, indem ich einen div baue, welcher
erscheint, wenn man ein jeweiligen button klickt und verschwindet, wenn
man in dem div auf ein "X" Button klickt? => So ein bisschen wie eine Navi,
nur halt mit Button.

Und wie soll das aussehen?

 

[b1zarRe]

Das ist momentan ja alles nur Theorie... damit
ich erstmal eine sinnige Entscheidung finde und dann
danach vorgehe...

 

[Banana_Jones]

Ich wüsste nicht, wie sich das rein über CSS lösen lassen könnte. Du kannst Deklarationen nicht in Abhängigkeit zu einem Klick auf ein (anderes) Element setzen.

Wenn du es nicht selbst mit JS umsetzen willst, gibt es für jQuery beliebig viele Lightbox-Plugins. Denen kann man meist als Quelle auch ein (verstecktes) div zuweisen.

 

[b1zarRe]

Danke Euch erstmal!

Habe es jetzt über JQUERY realisiert und funktioniert :)))

Leider habe ich jetzt nun noch das Problem, wie ich die Texte
dynamisch einpflegen kann. Also, momentan wird bei Klick eines
jeden Links das Popup aufgefahren und ein LoremIpsum Text angezeigt.

Letztendlich soll es aber natürlich so funktionieren, dass bei
Klick des Links "A" Text "123" erscheinen soll und bei Klick
des Links "B" Text "456" etc. erscheinen soll.

Wie lässt sich sowas nun sinnvoll implementieren? Sollte
ich jedem Link eine Art ID-Nummer geben, und dann
im JQuery Teil abfragen, welche ID angeklickt wurde und
mir dann jeweiligen Text herholen...? Oder geht es noch einfacher?
Hat jemand diesbezüglich eine Art Tutorial oder ein Codefragment???

Vielen Dank Euch!

 

[Tronjer]

Danke Euch erstmal!



Wie lässt sich sowas nun sinnvoll implementieren? Sollte
ich jedem Link eine Art ID-Nummer geben, und dann
im JQuery Teil abfragen, welche ID angeklickt wurde und
mir dann jeweiligen Text herholen...?

Das wäre die einfachste Variante.

$(selector).click(function() {
    var id = $(this).attr('id');
    .......
})

Die Variable id könnte nun an ein if-else oder switch-case Konstrukt weitergereicht werden. Oder du übergibst sie als Parameter an einen Ajax-Request und schickst sie an den Server. In dem Fall kannst du auch mit PHP und MySQL arbeiten.

 

[b1zarRe]

Danke,
ich habe es jetzt so hinbekommen:

$('.lightbox').click(function(){
<!-- TEXTE LIGHTBOX -->
var id = $(this).attr('id');

if(id==1) {
$(".boxtext").html("ein Text");
} else if(id==2) {
$(".boxtext").html("ein anderer Text");
}
<!-- TEXTE LIGHTBOX ENDE-->
});
(...)

<!-- TEXTE LIGHTBOX LINKS -->
<li><a href="#" class="lightbox" id="1">Link 1</a><p></li>
<li><a href="#" class="lightbox" id="2">Link 2</a><p></li>
<!-- TEXTE LIGHTBOX LINKS ENDE -->
(...)
<div class="boxtext"></div>

Nun ist aber mein Problem, dass ich auch Bilder oder Links (also unterstrichen), oder
fett Markierungen etc. machen möchte... Mit dem Befehl: $(".boxtext").html("ein anderer Text");
stellt er mir lediglich einen "Normalen" Plaintext in den Divcontainer... wie kann ich es
erzielen, dass ich diesen wie gewohnt html/css mässig bearbeiten kann?!


EDIT: Schon gut es geht :))) war wohl irgend ein kleiner Syntax oder Klammerfehler bei mir drin!

 

[Banana_Jones]

kleiner Hinweis: IDs und Klassen dürfen eigentlich nicht mit Zahlen beginnen...

 

[Sempervivum]

Wenn Du mehr von den IDs und Texten hinzufügst, wäre es eleganter, wenn Du die diese in ein assoziatives Array einfügst und daraus ausliest:
SELFHTML: JavaScript / Objektreferenz / Array

 

[Tronjer]

Oder du hängst an jeden ID-Namen eine Zahl an und spielst etwas mit den Strings.

var id="id_50";
var idNr = id.substr(3);
var div = $("id_" + idNr)
var nochEineId = $(div).attr("id");
..........