Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Nowa warstwa po kliknięciu
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
mimol
11.04.2010, 09:04:20
Chcę wykorzystać na stronię efekt przyciemnienia.
Znalazłem taki mały skrypt:
[HTML] pobierz, plaintext 
  1. <a href="#" onclick="grayOut(true); alert('Wyłącz'); 
  2. grayOut(false); return false;">Warstwa</a>
  3. <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>footer
  4. <script type="text/javascript">
  5. function grayOut(vis, options) {
  6.   var options = options || {}; 
  7.   var zindex = options.zindex || 50;
  8.   var opacity = options.opacity || 70;
  9.   var opaque = (opacity / 100);
  10.   var bgcolor = options.bgcolor || '#000000';
  11.   var dark=document.getElementById('darkenScreenObject');
  12.   if (!dark) {
  13.     var tbody = document.getElementsByTagName("body")[0];
  14.     var tnode = document.createElement('div');           // Create the layer.
  15.         tnode.style.position='absolute';                 // Position absolutely
  16.         tnode.style.top='0px';                           // In the top
  17.         tnode.style.left='0px';                          // Left corner of the page
  18.         tnode.style.overflow='hidden';                   // Try to avoid making scroll bars            
  19.         tnode.style.display='none';                      // Start out Hidden
  20.         tnode.id='darkenScreenObject';                   // Name it so we can find it later
  21.     tbody.appendChild(tnode);                            // Add it to the web page
  22.     dark=document.getElementById('darkenScreenObject');  // Get the object.
  23.   }
  24.   if (vis) {
  25.     // Calculate the page width and height 
  26.     if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) {
  27.         var pageWidth = document.body.scrollWidth+'px';
  28.         var pageHeight = document.body.scrollHeight+'px';
  29.     } else if( document.body.offsetWidth ) {
  30.       var pageWidth = document.body.offsetWidth+'px';
  31.       var pageHeight = document.body.offsetHeight+'px';
  32.     } else {
  33.        var pageWidth='100%';
  34.        var pageHeight='100%';
  35.     }   
  36.     //set the shader to cover the entire page and make it visible.
  37.     dark.style.opacity=opaque;                      
  38.     dark.style.MozOpacity=opaque;                   
  39.     dark.style.filter='alpha(opacity='+opacity+')'; 
  40.     dark.style.zIndex=zindex;        
  41.     dark.style.backgroundColor=bgcolor;  
  42.     dark.style.width= pageWidth;
  43.     dark.style.height= pageHeight;
  44.     dark.style.display='block';				 
  45.   } else {
  46.      dark.style.display='none';
  47.   }
  48. }
  49. </script>
  50.  
[HTML] pobierz, plaintext

Chcę wykorzystać to w troszkę inny sposób, więc próbowałem zmodyfikować skrypt. Chcę by po kliknięciu w Warstwa pojawiała się szara warstwa (i nie wyskakiwał alert, jednakże po ponownym kliknięciu w WARSTWĘ warstwa by znikała)
Zmieniłem kod na 
[HTML] pobierz, plaintext 
  1. <a href="#" onclick="grayOut(true); return false;">Warstwa</a>
[HTML] pobierz, plaintext

Jednak nie wiem jak przypisać hrefa do warstwy by po kliknięciu w nią znikała
mortus
11.04.2010, 11:24:15
Obawiam się, że nie podepniemy zdarzenia onclick do elementu tnode, ponieważ zdarzenie onclick miałoby wywoływać funkcję grayOut(false) i rekurencja będzie zbyt głęboka (JavaScript sobie nie poradzi). Możemy to zrobić w taki sposób:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.         <title>Tytuł</title>
  6.         <style type="text/css">
  7.             #darkenScreenObject {
  8.                 position: absolute;
  9.                 top: 0px;
  10.                 left: 0px;
  11.                 overflow: hidden;
  12. 	            display: none;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <script type="text/javascript">
  18.             function grayOut(vis, options){
  19.                 var options = options ||
  20.                 {};
  21.                 var zindex = options.zindex || 50;
  22.                 var opacity = options.opacity || 70;
  23.                 var opaque = (opacity / 100);
  24.                 var bgcolor = options.bgcolor || '#000000';
  25.                 var dark = document.getElementById('darkenScreenObject');
  26.                 if (vis) {
  27.                     // Calculate the page width and height 
  28.                     if (document.body && (document.body.scrollWidth || document.body.scrollHeight)) {
  29.                         var pageWidth = document.body.scrollWidth + 'px';
  30.                         var pageHeight = document.body.scrollHeight + 'px';
  31.                     }
  32.                     else 
  33.                         if (document.body.offsetWidth) {
  34.                             var pageWidth = document.body.offsetWidth + 'px';
  35.                             var pageHeight = document.body.offsetHeight + 'px';
  36.                         }
  37.                         else {
  38.                             var pageWidth = '100%';
  39.                             var pageHeight = '100%';
  40.                         }
  41.                     //set the shader to cover the entire page and make it visible.
  42.                     dark.style.opacity = opaque;
  43.                     dark.style.MozOpacity = opaque;
  44.                     dark.style.filter = 'alpha(opacity=' + opacity + ')';
  45.                     dark.style.zIndex = zindex;
  46.                     dark.style.backgroundColor = bgcolor;
  47.                     dark.style.width = pageWidth;
  48.                     dark.style.height = pageHeight;
  49.                     dark.style.display = 'block';
  50.                 }
  51.                 else {
  52.                     dark.style.display = 'none';
  53.                 }
  54.             }
  55.         </script>
  56.         <a href="#" onclick="grayOut(true); return false;">Warstwa</a>
  57.         <div id="darkenScreenObject" onclick="grayOut(false);">
  58.         </div>
  59.     </body>
  60. </html>
[HTML] pobierz, plaintext
Może przy użyciu jakiegoś frameworka (np. jQuery) dałoby się to zrobić bez umieszczania tego pustego div-a w body. Jeszcze taka uwaga co do wielkości tego div-a. W tej chwili ma on rozmiar (a dokładniej wysokość) treści body i to bez marginesów standardowych (2 x 8px w pionie i w poziomie).
mimol
11.04.2010, 13:45:19
wielkie dzięki, nawet lepiej że jest to na divach, bo jquery też swoje waży, a chciałem żeby to jak najszybciej się ładowało
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.