Popups

julieann

Erfahrenes Mitglied
Ich führe einfach mal diesen Thread fort, auch wenn das Problem jetzt ein etwas anderes ist:

Ich habe auf der rechten Seite Links ("...mehr"), die bei den kleinen Fotos eine vergrößerte Ansicht liefern. Dazu binde ich per PHP zwei verschiedene CSS Files ein, einmal mit "deaktiviertem Popup" (also, die normale Ansicht) und einmal mit Popup,das zu sehen ist):

http://www.oecocolor.de/TEST/css/popupaus.css

http://www.oecocolor.de/TEST/css/popupan.css

Die Seite selbst:

http://www.oecocolor.de/TEST/home.php?s=1

So, nun soll also bei Klick auf diesen Link ein Popup geöffnet werden, das geht ja auch soweit (die Ausrichtung darin mal eben außen vor gelassen).

Allerdings:
1) Es wird ein Teil des Popups (die Schrift) eingeblendet, auch wenn das Popup aus sein müsste.
2) So kannn ich ja leider nur 1 Popup definieren (läuft ja über die id). Was muss ich ändern, damit ich rechts mehrere verschiedene Popups einbinden und dann aufrufen kann?

Danke schonmal!
 
Hi,

die erste Frage bzw. deren Problem kann ich nicht nachvollziehen, da bei mir nichts eingeblendet wird, was nicht eingeblendet gehört.

Zur zweiten Frage: Diese erübrigt sich eigentlich, da nach dem Öffnen eines Popups die anderen Links überhaupt nicht mehr angeklickt werden können, um ein weiteres Popup zu öffnen.

Falls du darauf abzielst, dass immer das gleiche Popup wegen der ID geöffnet wird, erhalten die anderen Popups eben einen anders lautenden ID-Bezeichner.

mfg Maik
 
Warum es bei mir vorhin so komisch angezeigt wurde, kann ich auch nicht mehr nachvollziehen :(

Aber eine Frage: Dann brauche ich ja lauter verschiedene CSS-Files? Denn im Moment ist es doch so:
entweder CSS File Popupaus, oder CSS File Popupan.
Dann brauche ich ja PRO Eintrag auf der rechten Seite jeweils ein neues CSS File? Das ist ja auch nicht so prickelnd?
 
Wieso brauchst du mehrere CSS-Dateien, und wozu überhaupt "popupan.css" und "popupaus.css"? :eek:

Und selbst wenn, wieso wiederholst du in diesen beiden "variablen" Dateien den übrigen CSS-Code der Seite, der in ihnen identisch ist - ganz schön serverlastig, was du da so treibst :suspekt:

Zumal sich dein Code beim ersten Seitenaufruf so darstellt:
HTML:
<link rel="stylesheet" type="text/css" href="css/popupaus.css"><link rel="stylesheet" type="text/css" href="css/popupaus.css">


Doppelt gemoppelt hält wohl besser :)

mfg Maik
 
OK, dann poste ich mal meinen "Originalcode"

Code:
<!DOCTYPE
HTML
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Oecocolor GmbH & Co KG</title>
<link rel="shortcut icon" type="image/x-icon" href="http://www.tutorials.de/forum/images/favi.ico">
<?php 

if ($_GET['s']==1) { echo ('<link rel="stylesheet" type="text/css" href="css/popupaus.css">'); } 
if ($_GET['s']==2) { echo ('<link rel="stylesheet" type="text/css" href="css/popupan.css">'); } 
else { echo ('<link rel="stylesheet" type="text/css" href="css/popupaus.css">'); } 

?>

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
</head>

<body>
<div id="opaque"></div>
<div id="popup">
<div id="close"><a href="home.php?s=1"><img src="http://www.tutorials.de/forum/images/close.jpg" alt="close"></a></div>
<div id="wrap">

<img src="http://www.tutorials.de/forum/images/1.jpg" alt="Foto">

<h2>Destedt / Grundschule</h2>
		<h3>
		Besuchen Sie uns vom 15. – 18.09.2010 auf der Internationalen Fachmesse für Urbanes Grün und Freiraumgestaltung. Sie finden uns im Fachteil PLAYGROUND. Wir freuen uns auf Ihren Besuch.

		</h3>


		</div>
</div>


<div id="popup2">
<div id="close"><a href="home.php?s=1"><img src="http://www.tutorials.de/forum/images/close.jpg" alt="close"></a></div>
<div id="wrap">

<img src="http://www.tutorials.de/forum/images/1.jpg" alt="Foto">

<h2>Destedt / Grundschule</h2>
		<h3>
		Popup 2 Text
		</h3>


		</div>
</div>


<div id="wrapper">
<div id="mitte"><div class="inhaltDiv">



<h1><span class="green2"><span class="big">&ouml;cocolor</span></span> - Von Grund auf natürlich, sicher und wirtschaftlich

</h1>


<h2><span class="untertitel">Fallschutz für Kinderspielplätze und Bodenbeläge für öffentliche Wege, Bolz- und Sportplätze</span></h2>
<span class="bold"><span class="green2">
Sie suchen den idealen Boden für Spiel- oder Bolzplätze, für gepflegte Wege- oder Landschaftsgestaltung?</span><br>
Öcocolor bietet Ihnen natürliche Bodenbeläge, die überzeugende Langlebigkeit mit optimaler Nutzungsbreite und TÜV-geprüfter Sicherheit verbinden. 
<span class="green2">Ihr Vorteil: Wenig Aufwand für Wartung und Pflege!</span>
</span><br><br>
öcocolor Produkte sind einfach überzeugend: Sie bestehen zu 100 Prozent aus naturbelassenen trockenen Resthölzern. Als Vorreiter im Bereich „aktiver“ Bodenbeläge machen wir seit über 15 Jahren täglich beste Erfahrungen mit öcocolor im In- und Ausland – und unsere Partner in Städten, Gemeinden und Kommunen sowie Stadtplaner und Landschaftsarchitekten sind begeistert.
<br><br>
 Mit öcocolor entscheiden Sie sich für multieinsatzfähige, moderne Bodenbeläge, die vielen Ansprüchen von der Umweltverträglichkeit über die Sicherheit bis zur Wirtschaftlichkeit gerecht werden. Sie lassen sich einfach ausbringen und lassen Ihnen viel Raum für kreative Ideen: Die fünf Farbvarianten ermöglichen unendlich viele Gestaltungsspielräume vom Spielplatz über öffentliche Wege bis zur Verkehrsinsel.
<br><br>
<span class="bold"><span class="green2">
Lassen Sie sich inspirieren, lernen Sie öcocolor kennen – natürliche 
Bodenbeläge die das Leben schöner, nachhaltiger und sicherer machen. 

</span></span>


</div></div>

<div id="oben"><div class="inhaltDiv">



		<div class="floatright">
		
<a class="menu2" href="home.php" title="Home">Home</a>
<a class="menu2" href="kontakt.php" title="Kontakt">Kontakt</a>
<a class="menu2" href="impressum.php" title="Impressum">Impressum</a>
<a class="menu2" href="agb.php" title="AGB">AGB</a>
</div>

	  

<div class="mainpic">
<img src="http://www.tutorials.de/forum/images/oben_home.jpg" alt="Foto">
</div>



</div></div>

<div id="links"><div class="inhaltDiv">

<div class="flags">
<a href="home.php"><img src="http://www.tutorials.de/forum/images/flag1.jpg" alt="deutsch"></a>
<a href="home_en.php"><img src="http://www.tutorials.de/forum/images/flag2.jpg" alt="englisch"></a>
</div>

      <div class="mainpic"> 
	  <object width="251" height="196"
    data="flash/1.swf"
    type="application/x-shockwave-flash">
  <param name="movie" value="flash/1.swf">
</object>
	  
	  
	  
	 </div>


	<ul class="menu">
<li><a href="wir.php" title="Wir über uns">Wir &uuml;ber uns</a></li>
<li><a href="produkte.php" title="Produktinfos">Produktinfos</a></li>
<li><a href="anwendung.php" title="Anwendung">Anwendung</a></li>
<li><a href="einbau.php" title="Einbau">Einbau</a></li>
<li><a href="vertrieb.php" title="Vertrieb">Vertrieb</a></li>

</ul>

<div class="tuev">
		<img src="http://www.tutorials.de/forum/images/tuev.jpg" alt="TUEV">
		</div>



</div></div>

<div id="rechts"><div class="inhaltDiv">

<img class="floatleft" src="http://www.tutorials.de/forum/images/LOGO.jpg" alt="logo">


<div id="aussen">

	<h1>Aktuelles</h1>
		<br>
		
		

<table>
  <tr>
    <td><img src="http://www.tutorials.de/forum/images/klein1.jpg" alt="foto"></td>
    <td> <h2>GaLa Bau in Nürnberg</h2>
		<h3>
		Besuchen Sie uns vom 15. – 18.09.2010 auf der Internationalen Fachmesse für Urbanes Grün und Freiraumgestaltung.

		<a href="home.php?s=2">mehr</a>
		</h3></td>
  </tr>
    <tr>
    <td><img src="http://www.tutorials.de/forum/images/klein1.jpg" alt="foto"></td>
    <td>
	<h2>Destedt / Grundschule</h2>
		<h3>
		Zur großen Freude der Destedter Kinder und Lehrer k&ouml;nnen jetzt die Kinder  
		<a href="home.php?s=3">mehr</a>
		</h3></td>
  </tr>
</table>


   



	
	
		
			
	</div>
	<div id="linksrechts">
	<h4>N&uuml;tzliche Links</h4>
		<a href="http://www.bundesgartenschau.de" class="bot">www.bundesgartenschau.de</a>
		<a href="www.gardencolor.de" class="bot">www.gardencolor.de</a>
	
		</div>
		</div>

</div>

<div id="unten"><div class="inhaltDiv">

<span class="big">&Ouml;cocolor</span> GmbH & Co KG, Hemkenroder Straße 14, 38162 Destedt, Tel. 05306 / 941444, <a class="context" href="http://www.oecocolor.de" >www.oecocolor.de</a>
	


</div></div>
  </div>
</body>
</html>

Also, ich habe ein PHP Skript und das schaut nach folgendem: Klickt man auf der rechten Seite den Link an, so lädt die Seite das CSS File popupan.css
Wenn man darin auf den Close-Button drückt (oder eben im Normalzustand) ist das File popupaus.css "aktiv".
Im popupan wird die Seite dann dargestellt mit einem teils durchsichtigen DIV und dem "Popupfenster".
Wenn ich nun ein anderes darstellen will, muss ich dann dafür echt ein komplett neues "erstellen"?
Ich nenne das ganze immer Popup, weil die Dame, für die ich das mache, es auch imer so bezeichnet :)
 
*hüstel*

http://www.oecocolor.de/TEST/home.php?s=2 hat mit einem "Popup" nicht viel gemeinsam :p

Das sind "Popups":

  1. Der Klassiker:


  2. Populäre Methoden:


  3. Alternative:

... und alle benötigen kein gesondertes CSS-File für jedes einzelne Popup.

mfg Maik
 
Dass es sich nicht wirklich um ein Popup handelt, weiß ich doch...

Aber diese arbeiten doch alle mit javascript?
Und das soll/darf halt nicht verwendet werden...
 
Jo, dann sind die Möglichkeiten halt eingeschränkt, und man/frau muß sich auf solche "Umwege" begeben :rolleyes:

mfg Maik
 
Wenn der Kunde damit zufriedengestellt ist, dass die Popup-Box vom Browser solange gezeigt wird, wie der User seine Maustaste auf dem Link gedrückt hält, wäre hier kein PHP und JS vonnöten :)

HTML:
<a class="popup" href="#">Der Weg zu einem <span>CSS-Popup</span></a>
CSS:
a.popup span { display:none; }
a.popup:active span, a.popup:focus span { display:block; }

mfg Maik
 

Neue Beiträge

Zurück