DIV als PopUp mit Opacity-Eigenschaften & richtigen selektor (CSS) definieren

Aziz · 19.03.2013

Hallo,

ich habe Schwierigkeiten mit der Umsetzung einer bekannten Idee, einen Div-Layer als Popup-Box in den Vordergrund zu stellen und alles andere per Opacity-Eigenschaft in den Hintergrund schieben (transparent).

Zunächst einmal der vereinfacht dargestellte PHP/HTML-Code, um Daten aus der Datenbank zu holen und im DIV-Layer auszugeben.

Code:

...
&lt;div class=container>
..
&lt;?php>
echo &lt;table>; 
		  
		  for ($i=0; $i&lt;$num; $i++)
		  { 
			 $nn = mysql_result($res, $i, name);
			 $vn = mysql_result($res, $i, vorname);
			 	 
			 	echo &lt;div class='media'>; 
				echo $nn, $vn &lt;/div>; 
				echo &lt;div class='popup_box'>&lt;h1>$i&lt;/h1>&lt;a class='popupBoxClose'>Close&lt;/a>&lt;/div>;			 	
		  } 		  		
		  echo &lt;/table>; ?>

...

&lt;/div>

Dazu der CSS-Script

Code:

.

popup_box { 
  display:none; 
  position:fixed; 
  height:300px; 
  width:600px; 
  background:#FFFFFF; 
  left: 300px;
  top: 150px;
  z-index:1000; 
  border:2px solid #ff0000;   
  padding:15px; 
   
}

.container {
  background: #d2d2d2; 
  width:100%;
  height:100%;
  
}

.popupBoxClose {
  right:5px; 
  top:50px; 
  position:absolute; 
    
}

Und der jquery-code

Code:

$(document).ready( function() {
  
        
    $('.media').click( function() {      
      loadPopupBox();
    });
    
    $('.popupBoxClose').click( function() {
      unloadPopupBox();
    });

    function unloadPopupBox() {  
      $(.container).css({opacity: 1}); 
	  $('.popup_box').fadeOut(slow);
      
    }  
    
    function loadPopupBox() {  
	  $(.container).css({opacity: 0.1});  
      $('.popup_box').css({opacity: 1}); 
	  $('.popup_box').fadeIn(slow); 
	}		    
});

Wenn ich auf einen der vielen DIV-Layer media klicke, habe ich direkt 2 Probleme auf einmal

1) der popup_box-DIV wird auch vonn dem Opacity= 0,1 betroffen, weil es sich innerhalb des DIV container befindet. Da hilft auch leider nicht, wenn ich im CSS-code den Opacity von popup_box-DIV explizit auf 1 setze. Wenn ich diesen DIV außerhalb des container-DIV schreibe, dann funktioniert das mit der Schleife nicht. Denn der Inhalt dieses popups soll sich ja je nach angeklicktem media-DIV abhängen. Also muss es in der Schleife sein.
Wie kann ich dafür sorgen, dass der Opacity des PopUps trotzdem bei 1 bleibt?

2) Die popups stehen alle aufeinander. Ich weiß, dass ich hier mit ID arbeiten müsste, statt mit class. Aber ich weiß ja nicht, wie viele Daten in der Datenbank vorhanden sind. Dann müsste ich im CSS-Code ja blind #popup_box1 #popup_box2 #popup_box3 usw. vordefinieren, wenn ich jedem popup_box-Div den namen id=popup-box$id vergeben würde.
Wie kann ich also dafür sorgen, dass jeweils nur ein popup-Div erscheint, in dem der detailliere Inhalt von dem jeweiligen angeklickten Namen (media-Container) drin steht.
.

Aziz · 20.03.2013

Um es zu verdeutlichen, was ich meine, hier ein Beispiel:

http://shop.pm-magazin.de/abo/pm-ma...eser/p-m-magazin-leser-werben-fur-1-jahr.html

Sobald hier auf ein Produkt geklickt wird, erscheint ein DIV-Layer mit weiteren Einzelheiten.
Der einzige Unterschied zu meinem Vorhaben: Der Hintergrund bleibt unverändert (also keine Opacity-Spiele).

Was muss ich bei mir im Code ändern,
damit zumindest der jeweilige DIV-Layer - nach einem klick auf einen Namen - im Vordergrund erscheint?
Bei mir werden alle aufeinander gestapelt.

:-\

Aziz · 21.03.2013

Problem 2 habe ich bereits gelöst:

Code:

  $(document).ready( function() {
																	
					$('.media').click( function() {  
					   
						var id = $(this).attr('id');
						
						$(.container:not(.popup_box)).css({opacity: 0.1}); 
						$('#popup_box_'+id).fadeIn(slow); 
					});
    
					$('.popupBoxClose').click( function() {
													
						$(.container).css({opacity: 1}); 
						$('.popup_box').fadeOut(slow);
					});
  });
&lt;/script>

Code:

&lt;div class=container>
.
.
.
echo &lt;div class='media' id='$id'> $nn, $vn &lt;/div>;	
echo &lt;div class='popup_box' id='popup_box_$id'>&lt;h1>$nn&lt;/h1>&lt;a class='popupBoxClose'>Close&lt;/a>&lt;/div>;
.
.
&lt;/div>

Problem 1 soll eigentlich folgendermaßen gelöst sein:

Code:

$(.container:not(.popup_box)).css({opacity: 0.1});

Aber trotzdem wird not()-selektor ignoriert. Container popup_box wird nicht ausgeschlossen vom opacity=0.1

Wo ist nun der Fehler? :|

.

NetHunter · 22.03.2013

Versuchs mal so. Ersetze mal $(document).ready( function() durch jQuery(document).ready(function($).

Aziz · 22.03.2013

Danke für den Tipp, aber leider besteht das Problem weiterhin.

Seltsam nur: wenn ich statt opacity:0.1 z.B: background: black schreibe, sogar ohne not(),
dann wird tatsächlich nur der Hintergrund schwarz, nicht aber der DIV-Layer im Vordergrund.
Anscheinend verhält sich die Eigenschaft Opacity anders.

Dennoch sollte es doch möglich sein, mein Vorhaben zu realisieren. Aber wie?

NetHunter · 22.03.2013

Geht das nicht auch ohne Hochkommas. Also .css({ opacity : 0.1 });. Alternative css raus, animate rein: .animate({ opacity : 0.1 });

Aziz · 22.03.2013

Ja geht auch Hochkomma.
Die Opacity funktioniert zwar auch mit animate(), aber löst leider nicht das Problem.

Vermutlich wird die Idee im Allgemeinen mit einem anderen Trick gelöst. Aber wie..

NetHunter · 22.03.2013

Hmm. Eine letzte Idee von mir. Pack die Funktionen jede für sich.

Code:

$(document).ready( function() {
																	
					$('.media').click( function() {  
					   
						var id = $(this).attr('id');
						
						$(.container:not(.popup_box)).css({opacity: 0.1}); 
						$('#popup_box_'+id).fadeIn(slow); 
					});
  });

$(document).ready( function() {
																	
					$('.popupBoxClose').click( function() {
													
						$(.container).css({opacity: 1}); 
						$('.popup_box').fadeOut(slow);
					});
  });

Ansonsten weiß ich auch nicht weiter.
Schönes Wochenende!
NetHunter

Aziz · 22.03.2013

Nee leider nicht.
Die Funktion an sich klappt ja, aber der eine DIV-Layer wird nicht ausgeschlossen.

Naja..dann warten wir mal, ob jemand eine andere Idee hat. Ich danke dir für deine Mühe.

DIV als PopUp mit Opacity-Eigenschaften & richtigen selektor (CSS) definieren

Aziz

Aziz

Aziz

NetHunter

Aziz

NetHunter

Aziz

NetHunter

Aziz

DIV als PopUp mit Opacity-Eigenschaften & richtigen selektor (CSS) definieren

ANGEBOTE & SPONSOREN

Neueste Themen

Statistik des Forums