Tutorial: Popup Box

Zurück zur Tutorialübersicht

 

 

Vorschau

Die graue Popup-Box wird schon angezeigt, auf dem Header!

TITEL [x]
Die coole Popup-Box
Einfach wieder schließen...

 

 

Schwierigkeitsgrad

Schwer - HTML Kenntnisse Notwendig

Hinweis 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!

 

 

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

Kommentare: 18

  • #1

    Tom (Donnerstag, 10 Februar 2011 16:19)

    Kann man die Box sich auch erst öffnen lassen, wenn man auf einen Link klickt?

  • #2

    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

  • #3

    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

  • JimdoPro
    #4

    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

  • #5

    Thorsten123 (Sonntag, 24 Juli 2011 17:00)

    Danke! Supper Tutorial war garnicht schwer!

  • #6

    kinderschuhe-wetzlar (Donnerstag, 04 August 2011 10:46)

    top! vielen dank.

  • #7

    freggerseins (Donnerstag, 11 August 2011 12:00)

    Das habe ich wirklich schon lange gesucht :D! Danke für den Tipp!

  • #8

    tutorials4free (Freitag, 09 September 2011 16:37)

    Wie kann man die Breite und Höhe bearbeiten
    also witdh weiß ich nur das andere nicht

  • JimdoPro
    #9

    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

  • JimdoBusiness
    #10

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

  • #11

    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

  • JimdoBusiness
    #12

    Céline Stäuble (Sonntag, 02 Oktober 2011 20:21)

    Yayy habs selber rausgefunden, einfach das onklick durch onmouseover ersetzen hachh!! *happyyy* ;D

  • #13

    themadpictures (Donnerstag, 08 Dezember 2011 12:52)

    ich kenn mich gar nicht mit html aus und deswegen DANKE!

  • JimdoBusiness
    #14

    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

  • JimdoPro
    #15

    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

  • #16

    P-O-G Team (Sonntag, 08 April 2012 22:03)

    Hey Cool Danke

  • JimdoPro
    #17

    fv-ubstadt (Freitag, 20 April 2012 13:01)

    Würde gerne ein Bild in das Pop up laden. Ist das möglich ?

  • JimdoPro
    #18

    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

  • loading