Popups erstellen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anfangen
anzeigen
ausblenden
bewegen
bild
code
container
cursor
dank
element
ereignis
fenster
funktion
http
inhalt
maus
null
position
text
url
-
Hallo,
Ich kämpfe mich nun schon seit längerem durch Google, komme aber keinen Schritt voran. Ich möchte kleine Popupfenster erstellen, wie beispielsweise im Browsergame www.the-west.de/. Falls jemand dieses Spiel nicht kennt, versuche ich jetzt mal zu erklären wie das ganze aussieht: Es gibt kleine Popups, die über einen Link aktiviert werden. Diese Popups sind immer vor dem Haupt-Browserfenster, aber wenn es mehrere Popups gibt, ist immer das aktuellste vorne. Dabei blockieren sich die Popups allerdings nicht gegenseitig, also wenn ich 3 Popups offen habe, dann kann ich auch in allen dreien und im Haupt-Browser-Fenster arbeiten. Diese Popups sind nicht einfach ganz normale Browserfenster im Miniformat, sondern komplett selbst designete "Bilder", mit eigenen Grafiken zum schließen, minimieren und neu laden. Wenn ein Fenster minimiert wird, verschwindet es nich in der Taskleiste, sondern in einem bestimmten Bereich des Browserfensters. Soetwas würde ich auch gerne auf meiner Seite einbauen, ich hab auch schon etwas rumprobiert, habe es aber noch nicht so ganz hinbekommen.
Falls dies nicht in Javascript umsetzbar ist, sondern in PHP muss dieser Beitrag verschoben werden.
Ich freue mich um jeden lösungsansatz, also wenn jemad nur eine Teillösung hat, kann ich damit vielleicht auch schon etwas anfangen.
Danke im vorraus für alle Antworten
THWBM
PS: Ich kenne mich mittelmäßig mit PHP aus, aber nicht wirklich gut mit Javascript, also nehmt es mir bitte nicht übel, wenn ich bei Javascript die einfachsten Sachen nachfrage -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das was du suchst sind keine "popups", damit wirst du nicht viel finden, sondern "javascript widgets".
Ich würde vorschlagen, du schaust dich vllt ein wenig im Bereich von jQuery UI um, das ist recht einfach, oder du schaust dir Dojo bzw DojoFX an.
Liebe Grüße -
einfaches Beispiel:
<html> <head> <title>Layer Popup: open/close</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="javascript" type="text/javascript"> function show(id) { document.getElementById(id).style.visibility = "visible"; } function hide(id) { document.getElementById(id).style.visibility = "hidden"; } </script> <style type="text/css"> <!-- #layer1 { visibility:hidden; position:absolute; top:160px; left:150px; width:500px; height:200px; background:#FFFFAA; padding:0px; border:solid 1px #FF33FF; text-align:center; } .closelink { position:absolute; top:0px; right:0px; margin:0px; padding:8px; background:#FF33FF; } .closelink a { color:#FFFFFF; text-decoration:none; } --> </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <br> <br> <p>Open Layer: <a href="javascript:void(0)" onClick="show('layer1')">OPEN</a></p> <div id="layer1" onClick="hide('layer1')"> <p class="closelink"><a href="javascript:void(0)" onClick="hide('layer1')"><strong>CLOSE</strong></a></p> <h2>Layer Titel</h2> <p>Inhalt ... Bilder ... als HTML ... hier ...</p> <p>Blabla bla blablabla ...</p> <p>Alternativer Link: <a href="javascript:hide('layer1')"><strong>CLOSE</strong></a></p> </div> <br> <br> <br> </body> </html>
sollte funktionieren :) .... schön machen kann man es ja dann immernoch :)
... Position anpassen, Farben ändern, Inhalt im DIV id="layer1" mit Bild, etc..
das sollte die Funktion (selbst-)erklären
... einfach mit onClick Events die Sichtbarkeit der Ebene an / aus
EDIT:
anstatt onClick geht glaub ich auch so: (im href)
<a href="javascript:show('layer1')"><strong>OPEN</strong></a>
bzw.
<a href="javascript:hide('layer1')"><strong>CLOSE</strong></a>
das ist wohl Geschmacks-Sache ... :)
Beitrag zuletzt geändert: 26.8.2012 18:23:39 von tela -
Erstmal danke für eure schnellen Antworten,
Das was ich da bisher veranstaltet habe war eine einzige Katastrophe, aber das sieht alles schonmal ganz gut aus.
1. An ggamee:
Ich werde mich mal ein bischen erkundigen und mal gucken, was ich damit anfangen kann, wenn mich das System von tela nicht weiterbringt. Erstmal vielen Dank!
2. An tela:
Das sieht ja schonmal ganz gut aus, ist aber nicht ganz dass was ich gesucht habe. Was mir jetzt noch fehlt ist, dass man das Fenster nicht verschieben kann, sondern es verschwindet, sobald man es anklickt. Ich hab auch mal versucht einen Link in "layer1" zu setzen, der dann "layer2" öffnet, das hat auch funktioniert, aber "layer1" war danach zu. Was ich allerdings bräuchte wäre ein Fenster/layer, in dem ich weitere Fenster/layer verlinken kann, sodass aber auch immer das zuvor geöffnete Fenster/layer geöffnet bleibt. -
hallo
also mit meinem kleinen Beispiel oben kann man das Fenster nicht verschiben
man kann nur die Position vorher festlegen, Abstand von oben und links (in Pixel)
Wenn der Layer bei Link innerhalb des Layers nicht verschwinden soll,
dann ersetze einfach die Zeile
<div id="layer1" onClick="hide('layer1')">
durch:
<div id="layer1">
also den onClick Event im DIV raus machen,
habe es nur rein, um zu zeigen, dass man auch dort einen onClick-Event einbauen könnte
einen zweiten Layer kannst Du einfach durch einen Link aufmachen
<p>Open Layer 2: <a href="javascript:show('layer2')">OPEN Layer 2</a></p>
den kannst Du auch innerhalb von layer1 platzieren
<div id="layer1"> <p class="closelink"><a href="javascript:void(0)" onClick="hide('layer1')"><strong>CLOSE</strong></a></p> <h2>Layer Titel</h2> <p>Inhalt ... Bilder ... als HTML ... hier ...</p> <p>Open Layer 2: <a href="javascript:show('layer2')">OPEN Layer 2</a></p> </div>
genauso wie bei layer1, du musst halt den div als id="layer2" und dazu einen CSS-Style anlegen
neuer Teil im CSS:
#layer2 { visibility:hidden; position:absolute; top:370px; left:320px; width:500px; height:200px; background:#FFFFAA; padding:0px; border:solid 1px #FF33FF; text-align:center; }
und neues HTML
<div id="layer2"> <p class="closelink"><a href="javascript:hide('layer2')"><strong>CLOSE</strong></a></p> <h2>Layer Nummer 2</h2> <p>... ein anderer Inhalt ... auch als HTML ... jaja ...</p> </div>
das klappt ganz gut :) .. habs ausprobiert
Beitrag zuletzt geändert: 26.8.2012 19:40:39 von tela -
Da bin ich dir aber zuvorgekommen mit dem Ausprobieren. Ich hab bereits alles gemacht (Ein zweites layer in dem ersten velinkt, den HTML und den CSS teil angepasst.). Wie gesagt, ich kenne mich nicht gut mit JS aus, aber das mit dem "onClick" hätte ich sehen müssen, denn das ist ja soetwas von einleuchtend das "onClick" = "on click" = "auf klick" = "beim draufklicken". ;D
Schade, dass das mit dem verschiben nicht geht, aber trotzdem danke! Ich glaube, damit komme ich schon ein ganzes stück weiter!
Viele grüße:
THWBM -
thwbm schrieb:
^^ Vielleicht suchst Du sowas?
Schade, dass das mit dem verschiben nicht geht
Und hier der Quelltext.
Reicht nicht? Dann hier mal schauen.
;)
-
Für das verschieben kannst du auch Jquery UI verwenden. http://jqueryui.com/demos/draggable/
-
Nochmal danke für die weiteren Antworten, ich denke mit den links von menschle lässt sich was anfangen. Vielleicht werde ich mich aber auch mit makawas vorschlag beschäftigen
-
thwbm schrieb:
Ja, mit Jquery lässt sich schnell viel zaubern - wenn man es beherrscht. Allerdings sollte man sich da etwas reinknieen, was sich jedoch lohnt.
Nochmal danke für die weiteren Antworten, ich denke mit den links von menschle lässt sich was anfangen. Vielleicht werde ich mich aber auch mit makawas vorschlag beschäftigen
Habe Dir was ohne Jquery gebastelt, was Deinen Wünschen vielleicht etwas näher rückt.
Wegklickebare, verschiebbare Hinweisboxen (Div´s), mit OnMouseOver- und OnClick-Beispielen.
Sollte JavaScript deaktiviert sein, gibt es dazu einen Hinweis (was viele gerne vergessen ;).
Als kleine Spielerei wird beim bewegen eines Div-Container die Position im Fenstertitel angezeigt, und ein kleines Easteregg ist auch dabei.
Musst Dich mal durchklicken.
myDiv (Kompletter Quelltext in einem Dokument)
myDiv2 (Wie ^^ mit kürzeren Funktionsnamen)
myDiv3 (Kürzere Funktionsnamen, JS und CSS ausgelagert)
Viel Spaß
CSS (myDiv3)
body { margin: 20px; padding: 0px; overflow: auto; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; line-height: 135%; background-color: #DF0000;} h2 { margin: 10px 20px; font-size: 20px; text-decoration: none; Text-align: center; cursor: pointer;} .divClass { padding: 7px; position:absolute; overflow: hidden; z-index:1; background-color: #990000; border: 1px solid #000000; color: #ffffff; cursor: move;} #id1 { left:350px; padding: 5px; top: 60px; width: 310px; height: 120px;} #id2 { left:300px; padding: 5px; top: 175px; background-color: #808000; width: 176px; height: 310px;} #id5 { left:20px; padding: 5px; top: 120px; background-color: #808000; width: 190px; height: 310px;} #id1,#id2,#id3,#id5 { visibility: hidden;} a { color: #FFFF00; text-decoration: none; font-weight: bold; cursor: pointer;} .bold { margin: 0px; font-weight: bold;} p,p.text { margin: 0px; text-decoration: none;} .order { text-align: right;} .order a { text-decoration: none; color: #fff; font-size: 1.4em; font-weight: bold; cursor: pointer;}
JS (myDiv3)
var d = document,
objDrag = null, // Element, über dem Maus bewegt wurde
mouseX = 0, // X-Koordinate der Maus
mouseY = 0, // Y-Koordinate der Maus
offX = 0, // X-Offset des Elements, das geschoben werden soll
offY = 0; // Y-Offset des Elements, das geschoben werden soll
// Browserweiche
IE = d.all&&!window.opera;
DOM = d.getElementById&&!IE;
// Initialisierungs-Funktion
function init(){
// Initialisierung der Überwachung der Events
d.onmousemove = doDrag;
d.onmouseup = stopDrag;
}
// Wird aufgerufen, wenn die Maus über einer Box gedrückt wird
function startDrag(objElem) {
// Objekt der globalen Variabel zuweisen -> hierdurch wird Bewegung möglich
objDrag = objElem;
// Offsets im zu bewegenden Element ermitteln
offX = mouseX - objDrag.offsetLeft;
offY = mouseY - objDrag.offsetTop;
}
// Wird ausgeführt, wenn die Maus bewegt wird
function doDrag(ereignis) {
// Aktuelle Mauskoordinaten bei Mausbewegung ermitteln
mouseX = (IE) ? window.event.clientX : ereignis.pageX;
mouseY = (IE) ? window.event.clientY : ereignis.pageY;
// Wurde die Maus über einem Element gedrück, erfolgt eine Bewegung
if (objDrag != null) {
// Element neue Koordinaten zuweisen
posX = (mouseX-offX); posY = (mouseY-offY);
objDrag.style.left = posX + "px";
objDrag.style.top = posY + "px";
// Bei Bewegung Position im Fenstertitel ausgeben; kann auch gelöscht werden
document.title="X:"+posX+" Y:"+posY;if(posX+posY==0){alert('Toll!\n\n0 Punkte!\n\n'+posX+
' + ( '+posY+' ) = 0\n\n:P');objDrag.style.left="200px";objDrag.style.top="200px";objDrag=null};
}
}
// Wird ausgeführt, wenn die Maustaste losgelassen wird
function stopDrag(ereignis) {
// Objekt löschen -> beim Bewegen der Maus wird Element nicht mehr verschoben
objDrag = null;
// Standarttext im Fenstertitel ausgeben; kann auch gelöscht werden
document.title = "Div-Container mit Maus bewegen";
}
// Funktion zum ein/ausblenden der Div's
function showDiv(divId,divShow){if(d.getElementById) d.getElementById(divId).style.visibility=(divShow)?'visible':'hidden'; else d.all(divId).style.visibility=(divShow)?'visible':'hidden';}
// Funktion kuerzen. DivID: s = show (1) / h = hide (0)
function s1(){showDiv('id1',1)}
function s2(){showDiv('id2',1)}
function h1(){showDiv('id1',0)}
function h2(){showDiv('id2',0)}
Das Html muss ich aufgrund der Beitrags-Zeichenbeschränkung leider nachreichen. -
menschle schrieb:
Das Html muss ich aufgrund der Beitrags-Zeichenbeschränkung leider nachreichen.
Mach das, ich antworte jetzt mal, damit du wieder antworten kannst. Ich möcht dir und allen Anderen für ihre Hilfe sehr danken. -
thwbm schrieb:
^^ Eine Frage hätte ich dazu: Haste es Dir angeschaut, oder nicht?
menschle schrieb:
Das Html muss ich aufgrund der Beitrags-Zeichenbeschränkung leider nachreichen.
Mach das, ich antworte jetzt mal, damit du wieder antworten kannst. Ich möcht dir und allen Anderen für ihre Hilfe sehr danken.
Geht aus Deiner Antwort nicht hervor.
Hier der Restquelltext:
Html (myDiv3)
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Div-Container mit Maus bewegen</title> <link rel="stylesheet" type="text/css" href="all.css" /> <script src="showDiv.js" type="text/javascript"></script> </head> <body onload="init();"> <script>d.write('<h2 id="id4" onclick="s1();">Hallo, ich bin ein Link<br /><br /><img src="02.gif" width="24" height="36" /></h2>');</script> <noscript><h2 id="id4">Hallo, ich wäre ein Link.<br /><br />Leider ist JavaScript aber nicht aktiviert.<br /><br /><img src="09.gif" width="24" height="36" /></h2></noscript> <div id="id1" class="divClass" onmousedown="startDrag(this);return false;" onselectstart="return false;"> <div class="order"><a onclick="h1()">X</a></div> <p class="bold">Hallo, ich bin Div 1.</p><br /> Bewege mich!<br /><br />Div 2 sehen wollen? <a onclick="s2();">Klicken!</a> </div> <div id="id2" class="divClass" onmousedown="startDrag(this);return false;" onselectstart="return false;"> <div class="order"><a onclick="h2()">X</a></div> <p class="bold">Hallo, ich bin Div 2.</p><br /> Ich kann ebenfalls mittels Drag & Drop bewegt werden.<br /><br /> <p align="center"><img src="cat.jpg" width="150" height="150" /></p><br /> Reicht nicht? <a onclick="showDiv('id3',1);">Div 3!</a> </div> <div id="id5" class="divClass" onmousedown="startDrag(this);return false;" onselectstart="return false;"> <p class="bold">Ey! <img src="16.gif" width="24" height="36" /><br /> Wenn Du alle Div's ausblendest, siehste doch nix mehr!<br /> <img src="19.gif" width="24" height="36" /></p><br /> Achso, ich bin Div 5.<br /> <img src="07.gif" width="24" height="36" /><br /><br /> Wenigstens das Menu sollte doch sichtbar bleiben.<br /><br /> <a onclick="showDiv('id3',1);showDiv('id5',0);">Schließ mich! <img src="06.gif" width="24" height="36" style="border:none;" /></a> </div> <div class="text" id="id3"> <p class="bold">OnMouseOver</p> <a onmouseover="s1()">Div 1 anzeigen</a><br /> <a onmouseover="s2()">Div 2 anzeigen</a><br /> <a onmouseover="h1()">Div 1 ausblenden</a><br /> <a onmouseover="h2()">Div 2 ausblenden</a><br /> <br /> <a onmouseover="s1();s2()">Beide Div's anzeigen</a><br /> <a onmouseover="h1();h2()">Beide Div's ausblenden</a><br /> <br /> <p class="bold">OnClick</p> <a onclick="s1()">Div 1 anzeigen</a><br /> <a onclick="s2()">Div 2 anzeigen</a><br /> <a onclick="h1()">Div 1 ausblenden</a><br /> <a onclick="h2()">Div 2 ausblenden</a><br /> <br /> <a onclick="s1();s2()">Beide Div's anzeigen</a><br /> <a onclick="h1();h2()">Beide Div's ausblenden</a><br /> <br /> <a onclick="showDiv('id4',1);showDiv('id3',0);">Menu ausblenden</a><br /> <a onclick="h1();h2();showDiv('id3',0);showDiv('id4',0);showDiv('id5',1)">Alle Div's ausblenden!</a> </div> </body> </html> -
menschle schrieb:
^^ Eine Frage hätte ich dazu: Haste es Dir angeschaut, oder nicht?
Geht aus Deiner Antwort nicht hervor.
Ich habe es mir angeschaut oder genauer ich schaue es mir immernoch an.
Ich glaube das ist, was ich gesucht habe, Danke -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage