Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Nowa warstwa po kliknięciu, Zniknięcie wastwy po ponownym kliknięciu
mimol
post
Post #1





Grupa: Zarejestrowani
Postów: 247
Pomógł: 5
Dołączył: 10.12.2007

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 2)
mortus
post
Post #2





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----

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).
Go to the top of the page
+Quote Post
mimol
post
Post #3





Grupa: Zarejestrowani
Postów: 247
Pomógł: 5
Dołączył: 10.12.2007

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 2.10.2025 - 09:13
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn