Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][JavaScript]Okno dialogowe
Forum PHP.pl > Forum > Przedszkole
upeertv
Jak sprawic zeby to okno dialogowe wyswietliło sie po kliknieciu w jakis przycisk ?


  1. <script type="text/javascript"
  2. src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  3. <script type="text/javascript">
  4. * Pokaż okno dialogowe
  5. * @param what - klasa diva do otwarcia, np '.okno'
  6. * @param w - szerokość okna w pikselach
  7. */
  8. function showdial(what, w) {
  9. var wd = $(window).width();
  10. var hg = $(window).height();
  11. // przesuwamy okno do środka
  12. $('.'+what).css({width:w});
  13. var dialLeft = (wd/2) - ($("."+what).width()/2);
  14. var dialTop = 50;
  15. // dial_over to id diva przyciemnionego tła,
  16. // uniemożliwia ono interakcję z innymi elementami strony.
  17. $('#dial_over').css({height:hg, width:wd}).show();
  18. $('.'+what).css({left:dialLeft,top:dialTop}).show();
  19. }
  20.  
  21. /**
  22.  * Zamknij okno
  23.  * @param co - klasa diva do zamknięcia.
  24.  */
  25. function kill(co) {
  26. $('#dial_over').hide();
  27. $('.'+co).hide();
  28. }
  29.  
  30.  
  31. </script>
  32.  
  33.  
  34. <style type="text/css">
  35. #dial_over {
  36. width:100%;
  37. height:100%;
  38. /* przezroczystość */
  39. filter:alpha(opacity=50);
  40. -moz-opacity:0.5;
  41. -khtml-opacity:0.5;
  42. opacity:0.5;
  43. background:#000;
  44. position:absolute;
  45. left:0px;
  46. top:0px;
  47. z-index:100;
  48. display:none;
  49. }
  50.  
  51. #dial {
  52. background:#fff;
  53. /* cień pod oknem */
  54. -moz-box-shadow:1px 1px 5px #555;
  55. -webkit-box-shadow:1px 1px 5px #555;
  56. box-shadow:1px 1px 5px #555;
  57. display:none;
  58. top:30px;
  59. z-index:200;
  60. position:absolute;
  61. /* zaokrąglone rogi, nie działają w IE */
  62. -o-border-radius: 5px;
  63. -webkit-border-radius: 5px;
  64. -moz-border-radius: 5px;
  65. border-radius: 5px;
  66. text-align: left;
  67. }
  68. </style>
  69.  
  70.  
  71. <div id='dial' class='klasa'><em>tu jego treść</em></div>
fizzlebubble
Kod
$('#dial').click(function(){
showdial(klasa, 400);
});


I powinno działać, aczkolwiek staraj się dawać przykłady na jsbin.
upeertv
Moglbys objasnic jak to zrobic bo w sprawie js jestem początkujący wink.gif

http://jsbin.com/eneceq/1/edit
fizzlebubble
Tak już na marginesie, ale ten skrypt jest bardzo słaby. Do czego go w ogóle potrzebujesz? Mógłbyś zaprezentować stronę docelową, to może dobierzemy lepsze rozwiązanie smile.gif
upeertv
to ma wyswietlic okienko po kliknieciu np nazwy uzytkownika


np klikne "upeertv" i pojawi sie na srodku okienko z informacjami smile.gif
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.