Ankündigung

Einklappen
Keine Ankündigung bisher.

Javascript PopUp Box

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 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.


  • #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

                    Lädt...
                    X