Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Nowa warstwa po kliknięciu
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
mimol
Chcę wykorzystać na stronię efekt przyciemnienia.
Znalazłem taki mały skrypt:
  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.  

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
  1. <a href="#" onclick="grayOut(true); return false;">Warstwa</a>

Jednak nie wiem jak przypisać hrefa do warstwy by po kliknięciu w nią znikała
mortus
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:
  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>
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
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.