Tutorial: Popup Box
Vorschau
Die graue Popup-Box wird schon angezeigt, auf dem Header!
|
||||
Schwierigkeitsgrad
Schwer - HTML Kenntnisse Notwendig
Tutorial
1. Head bearbeiten
Geht auf eurer Jimdo Page in die Einstellungen und dort auf "Head bearbeiten". Hier fügt ihr folgenden Code ein und speichert das ganze ab:
<script type="text/javascript">
//<![CDATA[
/******************************************
* Popup Box- By Jim Silver @ jimsilver47@yahoo.com
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
//drag drop function for NS 4////
/////////////////////////////////
var dragswitch=0
var nsx
var nsy
var nstemp
function drag_dropns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
//drag drop function for ie4+ and NS6////
/////////////////////////////////
function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
return false
}
}
function initializedrag(e){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "html" : document.compatMode && document.compatMode!="BackCompat"? "documentElement" : "body"
while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}
if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmouseup=new Function("dragapproved=false")
////drag drop functions end here//////
function hidebox(){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}
//]]>
</script>
2. Objekt einfügen
Fügt den folgenden Code in ein neues HTML-Objekt auf eurer Seite ein. In der Sidebar, wenn das Fenster auf jeder Unterseite erscheinen soll, oder im normalen Content-Bereich, wenn die Popup-Box nur auf dieser einen Seite erscheinen soll.
<div id="showimage" style="position:absolute;width:210px;left:45%;top:200px">
<table border="0" width="210" bgcolor="#303030" cellspacing="0" cellpadding="2"><tr><td width="100%"><table border="0" width="100%" cellspacing="0"
cellpadding="0"><tr><td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" onmousedown="initializedrag(event)"><layer width="100%"
onmouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onmouseout="dragswitch=0"><ilayer width="100%" onselectstart="return false"><font face="Verdana"
color="#FFFFFF"><strong><small>TITEL</small></strong></font></ilayer></layer></td><td style="cursor:hand"><a href="#"
style="text-decoration:none; color: white;" onclick="hidebox();return false"><b>[x]</b></a></td></tr><tr><td width="100%" bgcolor="#FFFFFF"
style="padding:4px" colspan="2">
INHALT
</td></tr></table></td></tr></table></div>
3. Einstellungen
width: breite der Popup-box
TITEL: Wird als Fenstertitel angezeigt
left:45%: Abstand vom linken Bildschirmrand. Soll die Box in der Mitte stehen sind Prozentangaben zwischen 40% und 50% gut.
top:200px: Ein Festwert in Pixel als Abstand von oben. Auch % möglich
INHALT: Hier fügt ihr euren HTML-Inhalt ein. Wenn ihr nur einen Text einfügen wollt, könnt ihr auch ein neues Text-Objekt auf eurer Seite erstellen, dort alles richtig formatieren, auf HTML klicken, den HTML-Code kopieren und an diese Stelle im Popup-Objekt einfügen. Oder halt einen eigenen HTML-Code schreiben.
4. Optionale Einstellungen
Ihr könnt auch noch weitere Einstellungen im Code ausprobieren, wie z.B. die Farben verändern. Wer weiß wie es geht kann einfach einmal etwas herumexperementieren.
#303030: Rahmenfarbe. Hier könnt ihr einen anderen generieren.
#FFFFFF: Farbe des Fenstertitels
#FFFFFF: Hintergrundfarbe des Fensters
5. Die Tutorialsammlung unterstützen
Unterstützt die Tutorialsammlung, damit es auch weiterhin Jimdo Tutorials gibt!
Z.B. indem ihr auf "gefällt mir" drückt oder meine Hauptseite besucht.
Kommentar schreiben
Tom (Donnerstag, 10 Februar 2011 16:19)
Kann man die Box sich auch erst öffnen lassen, wenn man auf einen Link klickt?
Fabian S. (Donnerstag, 10 Februar 2011 17:31)
Hier findest du eine kleine Anleitung dazu:
http://fabiansebastian.jimdo.com/tutorials/popup-box/popup-box-klick/
Gruß, Supporter Fabian
Marc (Samstag, 16 April 2011 21:53)
Hi Fabian, kann es sein, dass du dich oben vertippt hast? "Erstellt das Intro nur, wenn ihr selbst HTML schreiben könnt!" -- das passt hier nicht. ;)
Gruß
Marc
Jimdo Tutorialz (Samstag, 16 April 2011 21:56)
Einfachen Text kann natürlich jeder einfügen, alles was darüber hinaus geht (Grafiken, ...) muss selbst in HTML/CSS geschrieben werden. Daher ist der Hinweis nicht ganz so unpassend ;)
Gruß, Fabian
Thorsten123 (Sonntag, 24 Juli 2011 17:00)
Danke! Supper Tutorial war garnicht schwer!
kinderschuhe-wetzlar (Donnerstag, 04 August 2011 10:46)
top! vielen dank.
freggerseins (Donnerstag, 11 August 2011 12:00)
Das habe ich wirklich schon lange gesucht :D! Danke für den Tipp!
tutorials4free (Freitag, 09 September 2011 16:37)
Wie kann man die Breite und Höhe bearbeiten
also witdh weiß ich nur das andere nicht
Jimdo Tutorials (Freitag, 09 September 2011 18:05)
Die Höhe passt sich automatisch dem Inhalt an und ist daher nicht vorgegeben. Du kannst allerdings ein "height:200px;" (ohne die "") direkt nach "width:210px;" einfügen. Dann sollte wenn mich nicht alles täuscht die Höhe anpassbar sein.
Gruß, JimdoFriend Fabian
Céline Stäuble (Sonntag, 02 Oktober 2011 19:21)
Hallo!! Ich habs eigentlich soweit gut verstanden, nur den teil mit dem pop up box klick... Wie hängt denn der pop up code mit dem link code zusammen? Wo muss ich den einfügen? Danke übrigens für deine schnelle antwort letztes mal!! Cool dass es solche helfer gibt hier!!!
Fabian S. (Sonntag, 02 Oktober 2011 19:29)
Den Code fügst du einfach ein ein neues WIDGET/HTML-Modul ein. Die Position ist dabei völlig egal - der Link zum öffnen wird dann dort angezeigt.
Gruß, JimdoFriend Fabian
Céline Stäuble (Sonntag, 02 Oktober 2011 20:21)
Yayy habs selber rausgefunden, einfach das onklick durch onmouseover ersetzen hachh!! *happyyy* ;D
themadpictures (Donnerstag, 08 Dezember 2011 12:52)
ich kenn mich gar nicht mit html aus und deswegen DANKE!
Conrad Pontenagel (Freitag, 09 März 2012 17:59)
Schönes Script. Bei mir liegt das Popup jedoch immer in eiener Ebene HINTER dem Content! Somit ist der Layer kaum lesbar. Ich verwende auch keinen INHALT-Text, sondern ein Bild im Layer. Geprüfte Browser: Chrome, Firefox und Safari. Wie kann ich dieses Problem beheben?
Besten Dank,
Conrad
Jimdo Tutorials (Sonntag, 11 März 2012 11:59)
Ich habe gerade auf deine Page geschaut - es scheint ja mittlerweile alles 1A zu funktionieren... Viel Spaß noch damit.
Gruß, JimdoFriend Fabian
P-O-G Team (Sonntag, 08 April 2012 22:03)
Hey Cool Danke
fv-ubstadt (Freitag, 20 April 2012 13:01)
Würde gerne ein Bild in das Pop up laden. Ist das möglich ?
Jimdo Tutorials (Freitag, 20 April 2012 13:05)
Sicher - mit den passenden HTML Codes. Doch wie schon oben fett steht, Zitat: "Der Boxinhalt muss komplett selbst in HTML geschrieben werden, hierbei werde ich euch nicht helfen. Also: Erstellt das Intro nur, wenn ihr selbst HTML schreiben könnt! "
Eine einfache Google-Suche nach "HTML Bild einfügen" wird dir da schon weiterhelfen.
Gruß, JimdoFriend Fabian
kerstin-und-gerald-heiraten (Samstag, 02 Juni 2012 09:40)
Ich bin beeindruckt, was Du alles aus den Jimdo-Seiten "heraus holen kannst". Danke für die Tutorials.
frieden-fuer-stuttgart (Montag, 18 Juni 2012 12:45)
hallo fabian,
ich habe einen fließtext und möchte, dass wenn man auf verschiedene wörter klickt sich dementsprechend ein popup_fenster öffnet... also verschiedene popupfenster in die seite einbinden. wie könnte ich das machen?
herzlichen dank
Jimdo Tutorials (Dienstag, 19 Juni 2012 10:02)
@frieden-fuer-stuttgart
Siehe Kommentar #2
Gruß, JimdoFriend fabian
frieden-fuer-stuttgart (Dienstag, 19 Juni 2012 13:15)
lieber fabian,
#2 bezieht sich auf eine box pro site, oder....? ich will aber mehere unterschiedliche boxen zu bestimmten wörtern aufmachen lassen können. also z.Bsp. stehtim text exploration (man soll draufklicken und in der box steht die erklärung was das bedeutet.) es tauchen aber noch 10 weitere fachbegriffe auf - und da muss ich doch den boxen unterschiedliche nummern geben, oder.und wo schreib ich das hin
bitte hilf mir:)
ganz herzlichen dank
Jimdo Tutorials (Donnerstag, 21 Juni 2012 13:16)
Leider habe ich nicht die Zeit, persönlichen Support geben zu können, sorry. Ich kann dir hier also leider nicht weiterhelfen.
Gruß, JimdoFriend Fabian
alpha thun (Samstag, 22 September 2012 15:57)
Hey Fabian!
Herzlichen Dank hat Super funktioniert, so kann ich meine Webseiten Besucher noch besser animieren ein Zimmer direkt online zu buchen!
ʙᴇʟɪᴇʙᴇʀ ∞ (Donnerstag, 11 Oktober 2012 20:10)
:)