Ankündigung

Einklappen
Keine Ankündigung bisher.

Javascript PopUp Box

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    Javascript PopUp Box

    Hallo
    ich habe mir mit hilfe von dieser Anleitung hier eine PopUp Box gebaut. Jetzt ist es aber so das ich nur das PopUp mit einen klick auf ein Link öffnen möchte. aber es öffnet sich immer noch ein Fenster. ich bin leider nicht so gut in JavaScript und hoffe das mir jemand hier im Forum helfen könnte.
    Stichworte: -
  • #2
    poste doch mal den teil des scriptes welcher dafür zuständig ist dass bei dir per klick auf einen link die divbox sichtbar wird.

    Kommentar

    • #3
      Hallo
      danke für deine Antwort ich habe bemerkt das ich garkein Scrpit für das öffnen des Pupups habe ich habe nur die HTML Datei
      Code:
      <html>

<head>
<meta http-equiv="Content-Language" content="de">
<link rel="stylesheet" type="text/css" href="http://www.stricknadel-schmitz.de/catalog/stylesheet.css">
<script language="JavaScript1.2">
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

//Drag und Drop Funktion fuer NS 4//
var dragswitch=0
var nsx
var nsy
var nstemp
function drag_drop_ns(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 und Drop Funktion fuer ie4+ und 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
crossobj.style.top=tempy+e.clientY-offsety
return false
}
}
function initializiere_drag(e){
crossobj=ns6? document.getElementById("einepopupbox") : document.all.einepopupbox
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "HTML" : "BODY"
while (firedobj.tagName!=topelement&&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.onmousedown=initializiere_drag
document.onmouseup=new Function("dragapproved=false")
//Drag und Drop Funktionen enden hier//
function box_weg(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.einepopupbox.visibility="hide"
}
</script>
</head>

<body>

<div id="einepopupbox" style="position:absolute;width:481px;left:245px;top:51px; height:481px">
	<table border="0" width="494" cellspacing="0" cellpadding="2">
		<tr>
			<td width="100%">
			<table border="0" width="100%" cellspacing="0" cellpadding="0" height="34">
				<tr>
					<td id="dragbar" style="cursor:hand" width="100%" class="infoBoxHeading">

<ilayer width="100%" onSelectStart="return false">
					<layer width="100%" onmouseover="dragswitch=1;if (ns4) drag_drop_ns(einepopupbox)" onmouseout="dragswitch=0">
Pflegesymbole
					</layer>
					</ilayer></td>
					<td style="cursor:hand">
					<a href="#" onclick="box_weg();return false">
					</a></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" height="19">
					<table border="0" width="100%" cellspacing="0" cellpadding="1" class="infoBox">
						<tr>
							<td>
							<table border="0" width="100%" cellspacing="0" cellpadding="3" class="infoBoxContents">
								<tr>
									<td class="main" colspan="2">In diesen 
									Fenster werden Ihnen die Pflegesymbole 
									erklärt.
</td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									</td>
									<td valign="top" class="main" width="86%">
								
									Normalwäsche

									Dieses Zeichen steht für Normalwäsche. Hier 
									können Sie das Standard-
									programm Ihrer Waschmaschine verwenden. Die 
									Zahl im Bottich gibt die 
									Waschtemperatur in Grad Celsius an, die 
									nicht überschritten werden darf.
									</td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									<hr color="#F56110" size="1"></td>
									<td valign="top" class="main" width="86%">
									<hr color="#F56110" size="1">
									</td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									</td>
									<td valign="top" class="main" width="86%">
									Schonwaschgang

Der Balken unter dem Bottich bedeutet Schonwaschgang. Textilien mit diesem
Zeichen brauchen eine mildere mechanische Behandlung. Wählen Sie hierfür
eines der Schonprogramme Ihrer Waschmaschine, die dann z. B. mit weniger
Umdrehungen schleudern.
									</td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									<hr color="#F56110" size="1"></td>
									<td valign="top" class="main" width="86%">
									<hr color="#F56110" size="1"></td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									</td>
									<td valign="top" class="main" width="86%">
									Spezialschonwaschgang

Der unterbrochene Balken unter dem Bottich bedeutet Spezialschonwaschgang
bzw. Feinwäsche. Hiermit sind besonders sanfte, spezielle Waschgänge wie
z.B. ein Wollprogramm oder ein Feinprogramm gemeint, die Sie je nach der
Programmauswahl Ihrer Maschine und der Art der zu waschenden Textilie wählen.
									</td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									<hr color="#F56110" size="1"></td>
									<td valign="top" class="main" width="86%">
									<hr color="#F56110" size="1"></td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									</td>
									<td valign="top" class="main" width="86%">
									Handwäsche

Die so gekennzeichnete Textilie sollte nicht in der Maschine gewaschen
werden. Hinsichtlich der Wassertemperatur und der Behandlung ist besondere
Vorsicht geboten.</td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									<hr color="#F56110" size="1"></td>
									<td valign="top" class="main" width="86%">
									<hr color="#F56110" size="1"></td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									</td>
									<td valign="top" class="main" width="86%">
									Nicht waschen

Bei durchgestrichenem Bottichsymbol ist eine Nasswäsche nicht möglich.
Sie können diese Textilie nur mit speziellen Trockenmitteln behandeln,
oder in die Reinigung geben.</td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									<hr color="#F56110" size="1"></td>
									<td valign="top" class="main" width="86%">
									<hr color="#F56110" size="1"></td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									</td>
									<td valign="top" class="main" width="86%">
									Bügeln Sie hier auf geringster Stufe. Die entsprechende Textilie ist
hitzeempfindlich und kann sich bei zu großer Hitze verziehen. Zwei Punkte
bedeuten Bügeln auf mittlerer Stufe und bei drei Punkten wird auf höchster
Stufe gebügelt.
									</td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									<hr color="#F56110" size="1"></td>
									<td valign="top" class="main" width="86%">
									<hr color="#F56110" size="1"></td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									</td>
									<td valign="top" class="main" width="86%">
									Dies ist das Zeichen für Dämpfen. Falls Sie kein Dampfbügeleisen besitzen,
bügeln Sie die Textilie in leicht feuchtem Zustand oder legen Sie beim
Bügeln ein feuchtes Tuch darüber. Knitterfalten verschwinden einfacher.
									</td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									<hr color="#F56110" size="1"></td>
									<td valign="top" class="main" width="86%">
									<hr color="#F56110" size="1"></td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									</td>
									<td valign="top" class="main" width="86%">
									Textilien mit diesem Symbol können nicht gebügelt werden. Hängen Sie sie
über Nacht an die frische Luft oder während des Duschens in das Bade-
									zimmer. Die Luftfeuchtigkeit glättet kleine Knitterer.
									</td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									<hr color="#F56110" size="1"></td>
									<td valign="top" class="main" width="86%">
									<hr color="#F56110" size="1"></td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									</td>
									<td valign="top" class="main" width="86%">
									Textilien mit durchgestrichenem Trocknersymbol gehören nicht in den
Wäschetrockner.
									</td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									<hr color="#F56110" size="1"></td>
									<td valign="top" class="main" width="86%">
									<hr color="#F56110" size="1"></td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									</td>
									<td valign="top" class="main" width="86%">
									Textilien mit durchgestrichenem Trocknersymbol gehören nicht in den
Wäschetrockner.
									</td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									<hr color="#F56110" size="1"></td>
									<td valign="top" class="main" width="86%">
									<hr color="#F56110" size="1"></td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									</td>
									<td valign="top" class="main" width="86%">
									
Das durchgestrichene Dreieck gibt an, dass die Textilie nicht gebleicht
werden darf. Wenn in dem Dreieck CI steht, ist Chlorbleiche möglich.
									</td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									<hr color="#F56110" size="1"></td>
									<td valign="top" class="main" width="86%">
									<hr color="#F56110" size="1"></td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									</td>
									<td valign="top" class="main" width="86%">
									
Das durchgestrichene Dreieck gibt an, dass die Textilie nicht gebleicht
werden darf. Wenn in dem Dreieck CI steht, ist Chlorbleiche möglich.
									</td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									<hr color="#F56110" size="1"></td>
									<td valign="top" class="main" width="86%">
									<hr color="#F56110" size="1"></td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									</td>
									<td valign="top" class="main" width="86%">
									
Das durchgestrichene Dreieck gibt an, dass die Textilie nicht gebleicht
werden darf. Wenn in dem Dreieck CI steht, ist Chlorbleiche möglich.
									</td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									<hr color="#F56110" size="1"></td>
									<td valign="top" class="main" width="86%">
									<hr color="#F56110" size="1"></td>
								</tr>
								<tr>
									<td valign="top" class="main" width="11%">
									</td>
									<td valign="top" class="main" width="86%">
									
Ist der Kreis durchgestrichen, ist eine chemische Reinigung nicht möglich.</td>
								</tr>
								<tr>
									<td colspan="2" height="34">
									[img]images/pixel_trans.gif[/img]</td>
								</tr>
							</table>
							</td>
						</tr>
					</table>
					</td>
				</tr>
			</table>
			</td>
		</tr>
	</table>
</div>

</body>

</html>
      ich wei? auch nicht was ich für ein script nehmen muss.

      Kommentar

      • #4
        hm, das ist nicht die seite von wo du das div aufrufst sondern hier wird direkt das div dargestellt. wie rufst du das auf?

        Kommentar

        • #5
          ich rufe einfach die Seite über einen Ganz normalen HTML Link auf ich möchte es aber so haben das die seit bzw. Das Popup über auf der Seite öffnen möchte wo der Link steht

          Kommentar

          • #6
            "es öffnet sich ein fenster" = eine unnütze seite wird zusätzlich geöffnet?

            dann mach den link so:

            box

            Kommentar

            • #7
              Nein ich habe einen Shop mit Textilien und in der Produktbeschreibung werden Pflege Symbole angezeigt und das Popup soll die Erklärung dazu liefern

              Kommentar

              • #8
                du hast doch in deinem js einen funktion mit namen "box_weg".
                step 1: kopiere diese funktion und kehre sie um;
                Code:
                function box_auf(){
if (ie4||ns6)
crossobj.style.visibility="visible"
else if (ns4)
document.einepopupbox.visibility="show"
}
</script>
                step 2: schreibe bei deinem link wo bei betätigung die info auftauchen soll;
                Code:
                <a href="#" onClick="box_auf();return false">
                step 3: deine ebene muß erstmal weg um beim laden der seite nicht sofort angezeigt zu werden. als setze in der styleeigenschaft der ebene die visibility ein:
                Code:
                <div id="einepopupbox" style="position:absolute;width:250px;left:250;top:250; visibility: hidden">
                wobei du hier für die browser wieder eine js abfragefunktion machen müsstest...

                ist nicht getestet aber vielleicht hilft dir das erstmal.
                eigentlich ist es kein popup sondern nur einen ebene die am anfang sichtbar und bei betätigung des schließbuttons unsichtbar gemacht wird...

                Kommentar

                • #9
                  Hallo
                  Danke für deine antwort wie gesagt ich kenne mich nicht wirklcih mir JS aus ich habe es nur aus der Demo übernommen und die Farben geändert

                  mit deiner Step two Step anleitung komme ich nicht klar bzw. was sol ich bei der funktion um Kehren

                  Code:
                  function box_auf(){
if (ie4||ns6)
crossobj.style.visibility="visible"
else if (ns4)
document.einepopupbox.visibility="show"
}
</script>

                  Kommentar

                  • #10
                    du hast doch bei dr. web diese funktion "box_weg" wimt du das ganze wieder schließen kannst. brauchst du aber erst wenn es angezeigt wird. da du aber am anfang erstmal nur die auflistung deiner produkte hast und erst die box anzeigen lassen willst wenn man auf einen button klickt (so hab ich es verstanden) musst du die box ja aufmachen können. dazu hab ich dir die funktion box_weg "umgeschrieben" in box_auf.
                    ich denke der user macht folgendes;
                    - er kommt auf deine seite
                    - schaut sich die produkte an
                    - will zu einem produkt nähere infos und klickt auf einen button
                    - "box_auf" schaltet die div-box auf sichtbar (visible)
                    - der user liest sich die infos durch
                    - der user klickt auf den schließen-button
                    - "box_weg" tritt in kraft welches die box wieder zu macht

                    oder ist es nicht so angedacht?

                    Kommentar

                    Vorherige Weiter
                    Lädt...
                    X