Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [PHP][JavaScript]Okno dialogowe
upeertv
post 28.03.2013, 11:42:00
Post #1





Grupa: Zarejestrowani
Postów: 111
Pomógł: 0
Dołączył: 5.01.2013

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


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>
Go to the top of the page
+Quote Post

Posty w temacie


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

 



RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 14:06