[AJAX] Okna dialogowe, podstawy. Opcje

[Wishermil]

Witam!

Rozpocząłem swoją przygodę z Ajaxem i nigdzie nie mogę znaleźć tutoriala odnośnie kreowania samych okienek, wszędzie pchają jakieś zaawansowane moduły (galerie itp.). Mi chodzi tylko o sam szkielet.

Tzn.:

Klikam na link, który wywołuje Ajaxa wykonującego operacje na pliku php i chciałbym, aby po skończeniu operacji pojawiło się zwykłe okienko z informacją: "Poprawnie wykonane." Klikamy w puste pole i okienko się ładnie zamyka.

Z góry dziękuje za pomoc.

[Kostek.88]

Jakiś czas temu robiłem takowe okienka. Teraz z pamięci w wielkim skrócie:

[HTML] pobierz, plaintext 
<div id="wrapper"><div>
 
<div id="container">
   <div id="popup">
      <h1>Title</h1>
      <p>Content</p>
   </div>
</div>
[HTML] pobierz, plaintext 

To wyżej to szkielet HTML: wrapper to ma być ciemne, półprzezroczyste tło za oknem, stąd div jest wyrzucony poza obszar, container to kontener na Twoje okienko: oba mają mieć ustawione position:fixed oraz width i height na 100%. Z kolei #popup ma być na środku ekranu? Jak to zrobić? Jak masz stałą szerokość okna to:

[CSS] pobierz, plaintext 
#popup {
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -200px; // marginesy ujemne równe połowie szerokości i wysokości okna
width: 400px;
height: 200px
}
[CSS] pobierz, plaintext 

Jeśli chodzi o dynamicznej wielkości okno, to poszukać centering div horizontal vertical w google, albo zrób jQuery.

pozostałe elementy: <h1> - tytuł, <p> - treść

A teraz AJAX: (umieszczam w kodzie PHP, bo ładniej koloruje, niech Cię nie zmyli to)

[PHP] pobierz, plaintext 
$(document).ready(function(){
 
   $('a.link').click(function(){
      $.ajax({
          type: 'POST', // lub GET
          success: function(data) {
             $('body').append(sciezka); // sciezka do pliku HTML
          },
          beforeSend: function(){
              // tutaj mozesz wstawic loader
          }, 
          error: function(){
             $('body').append(sciezka);
          }
      });
   });
 
});
[PHP] pobierz, plaintext 

Aha, do samego okienka wrzuć jeszcze trochę jQuery

[PHP] pobierz, plaintext 
    $('div#container').click(function(){
       $('div#wrapper').remove();
       $('div#container').remove();
})
[PHP] pobierz, plaintext 

ew. jak masz dużo takich okienek aktywnych już, to odwołuj się poprzez $(this)

[PHP] pobierz, plaintext 
    $('div#container').click(function(){
       $(this).prev('div#wrapper').remove();
       $(this).remove();
});
[PHP] pobierz, plaintext 

A wtedy też pozamieniaj ID na class, co by się nie duplikowało. Oczywiście w kodzie może być sporo błędów, sam to zrobiłem jeszcze inaczej, ale generalnie idea jest taka. Co do wrappera, to tak sobie teraz pomyślałem, że możesz go wywalić, a zostawić sam container, tylko jak będziesz chciał ustawić tło półprzezroczyste, to nie używaj opacity, bo okno też Ci się takie zrobi... no chyba że zdefiniujesz kolor np. rgba(0,255,0, 0.5) - zielony przezroczysty 50%.

Co do kliknięcia poza okno i jego likwidacji, gdzieś na stronce jquery4u.com widziałem rozwiązanie, że wystarczy dać $('html').click ..... i wywołać akcję dla zamknięcia okna. Testowałem i działa. Aha... jest jeszcze jeden problem, oczywiście do obejścia.... jak klikniesz w samo okno, to też znika (IMG:style_emoticons/default/biggrin.gif) Musisz dać coś takiego

[PHP] pobierz, plaintext 
$('div.popup').click(function(event){
event.stopPropagation();
});
[PHP] pobierz, plaintext 

Zapobiegasz wówczas rozprzestrzenienia się akcji z kontenera na okienko: po dodaniu tego kodu i kliknięciu na kontener, okno zamknie się, po kliknięciu w sam popup - nie. Oczywiście w ogóle nie musisz ładować konterena, tylko dać np. <a href="">x</a> i ustawić go w prawym górnym rogu okna i ostylować odpowiednio.

PS. Do tego potrzebna Ci biblioteka jQuery
PS2. Możesz dograć jQueryUI do tego i zrobić tak:

[PHP] pobierz, plaintext 
   $(div.popup).draggable({handle: 'h1'});
[PHP] pobierz, plaintext 

Wtedy uruchomisz opcję przeciągania i upuszczania okna chwytając za pasek tytułu, tj. H1, ew. $(div.popup).draggable(); - daje Ci możliwość przeciągania okna, gdziekolwiek go chwycisz.

Sorki za bałagan w wypowiedzi, ale naprawdę na szybko napisałem.