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

Dieses Thema DIV als PopUp mit Opacity-Eigenschaften & richtigen selektor (CSS) definieren im Forum "Webentwicklung, Hosting & Programmierung" wurde erstellt von Aziz, 19. März 2013.

Thema: DIV als PopUp mit Opacity-Eigenschaften & richtigen selektor (CSS) definieren Hallo, ich habe Schwierigkeiten mit der Umsetzung einer bekannten Idee, einen Div-Layer als Popup-Box in den...

  1. 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:
    ...
    <div class=container>
    ..
    <?php>
    echo <table>; 
    		  
    		  for ($i=0; $i<$num; $i++)
    		  { 
    			 $nn = mysql_result($res, $i, name);
    			 $vn = mysql_result($res, $i, vorname);
    			 	 
    			 	echo <div class='media'>; 
    				echo $nn, $vn </div>; 
    				echo <div class='popup_box'><h1>$i</h1><a class='popupBoxClose'>Close</a></div>;			 	
    		  } 		  		
    		  echo </table>; ?>
    
    ...
    
    </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.
    .
     
  2. Um es zu verdeutlichen, was ich meine, hier ein Beispiel:



    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.

    :-\
     
  3. 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);
    					});
      });
    </script>
    Code:
    <div class=container>
    .
    .
    .
    echo <div class='media' id='$id'> $nn, $vn </div>;	
    echo <div class='popup_box' id='popup_box_$id'><h1>$nn</h1><a class='popupBoxClose'>Close</a></div>;
    .
    .
    </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? :|

    .
     
  4. Versuchs mal so. Ersetze mal $(document).ready( function() durch jQuery(document).ready(function($).
     
  5. 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? :mad:
     
  6. Geht das nicht auch ohne Hochkommas. Also .css({ opacity : 0.1 });. Alternative css raus, animate rein: .animate({ opacity : 0.1 });
     
  7. 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..
     
  8. 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
     
  9. 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.
     
Die Seite wird geladen...

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

Forum Datum
Probleme mit Download-Popup Web-Browser 27. Jan. 2015
Popups wegen Adobe Flash Player Updates Windows 7 Forum 4. Juli 2013
Kennt jemand ein Nachfolgeprogramm von popup@devnull ? Software: Empfehlungen, Gesuche & Problemlösungen 20. Feb. 2013
Prg für kleines Txt-Popup Fenster ?? Software: Empfehlungen, Gesuche & Problemlösungen 20. Jan. 2012
IE9 Popup nervt Web-Browser 23. Feb. 2011