Ankündigung

Einklappen
Keine Ankündigung bisher.

Transparenz von 2 boxen

Einklappen

Neue Werbung 2019

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

  • Transparenz von 2 boxen

    Hi,

    ich hab auf meiner Seite 2 boxen, die transparent werden sollen, wenn ich auf einen Link klicke. Die Fehlerkonsole spuckt nix aus, was geht hier nicht?

    Skript
    Code:
    function verschwinden(opacity06_real, diff06, opacity10_real, diff10) {
      opacity06_real = opacity06_real - diff06;  
      opacity06 = Math.round(opacity06_real * 10) / 10;
          
      document.getElementById('error_outbox').style.opacity = opacity06;
      document.getElementById('error_outbox').style.filter = "Alpha(opacity="+opacity06+")";   
      
      opacity10_real = opacity10_real - diff10;  
      opacity10 = Math.round(opacity10_real * 10) / 10;
            
      document.getElementById('error_box').style.opacity = opacity10;
      document.getElementById('error_box').style.filter = "Alpha(opacity="+opacity10+")";  
        
      if(opacity10_real == 0) {
        document.getElementById('error_outbox').style.display = 'none';
        document.getElementById('error_box').style.display = 'none';
        clearInterval(interval);
      }
    }
    
    function fehlerschliessen() {
      var zeit = 1000;
      var opacity10_real = 1.0;  
      var opacity06_real = 0.6;
      var diff10 = opacity10_real / zeit;
      var diff06 = opacity06_real / zeit;  
    
      var intervalzeit = 1000 / zeit;  
      var interval = window.setInterval("verschwinden("+opacity06_real+", "+diff06+", "+opacity10_real+", "+diff10+")", intervalzeit);
    }
    und die php

    PHP-Code:
    switch($_GET['error']) {
      case 
    1:
        echo 
    "
        <div id=\"error_outbox\" class=\"error_outbox\"></div>
        <div id=\"error_box\" class=\"error_box\" align=\"center\">
        Bitte füllen Sie alle Felder aus!<br>
        <a href=\"javascript:fehlerschliessen();\">Schließen</a>
        </div>
        </div>
        "
    ;
        break;

    und nochn Auszug aus dem Style-Sheet

    Code:
    .error_outbox{
      position: absolute;
      left: 0px;
      top: 0px;
      margin: 0px;
      z-index: 20;
      width: 100%;
      height: 100%;
      background-color: black;
      opacity: 0.6;
      filter:alpha(opacity=60);
    	-moz-opacity: 0.6;
    	-khtml-opacity: 0.6;
    }
    
    .error_box{
      position: absolute;
      top: 30%;
      left: 50%;
      margin-left: -250px;
      z-index: 21;
      width: 500px;
      background-color: yellow;
    }

  • #2
    hier ist die lösung:
    PHP:
    PHP-Code:
    switch($_GET['error']) {
      case 
    1:
        echo 
    "
        <div id=\"error_outbox\" class=\"error_outbox\"></div>
        <div id=\"error_box\" class=\"error_box\" align=\"center\">
        Bitte füllen Sie alle Felder aus!<br>
        <div class=\"close\">Schließen</div>
        </div>
        </div>
        "
    ;
        break;

    HTML:
    Code:
    <html>
    <head>
    <!-- irgendwelche sachen -->
      <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>
    <script type="text/javascript">
    $(document).ready(function(){
    
      $("div.close").click(function () { //beim click auf schließen div
      $("div.error_outbox").fadeOut("slow"); // lasse langsam das fenster ausblenden
      });
    })
    </script>
    <!-- andere sachen -->
    </body>
    </html>
    .... jetzt "nur" noch auf dein script anpassen
    MFG
    apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

    Kommentar


    • #3
      Danke nur noch 1 Frage: Gibt mit JavaScript auch die möglichkeit die -moz-opacity und die -khtml-opacity anzupassen?

      Kommentar


      • #4
        wenn du jQuery verwendest... passiert das automatisch jQUery is browserunabhängig
        apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

        Kommentar

        Lädt...
        X