Ciekawym sposobem na wywołanie nowego okna dialogowego jest wyświetlenie go na bieżącej stronie, ściemniając jednocześnie tło. Podobny efekt stosuje m. in. Lightbox. W ten sposób okno będzie dobrze widoczne a użytkownik nie będzie zdezorientowany interfejsem. W niniejszym tekście postaram się pokazać, jak wyświetlić w ten sposób dodatkowy formularz stosując jQuery.

Na zakończenie niniejszego poradnika otrzymamy efekt, który można zobaczyć w całości tutaj. Będzie to formularz umożliwiający dodanie nowej osoby do przykładowego systemu. Znajdzie się na nim kilka pól, w tym lista rozwijana z nazwami zawodów a obok niej przycisk „Dodaj nowy”. Po jego kliknięciu pojawi się odpowiednie okno z formularzem dodania rekordu. Pomijam tu fakt, że pola będą generowane na podstawie danych z bazy, oraz uproszczam wygląd samego formularza (osoba a nie imię, nazwisko, itd).

Na początek stwórzmy więc formularz, który będzie widoczny od samego początku na ekranie.

<form action="" method="post">
  <div class="field">
    <label for="person">Osoba</label>
    <input type="text" name="person" id="person" value=""/>
  </div>
  <div id="add-new-subform">
  <label for="new-occupation">Nowy zawód</label>
  <input type="text" value="" name="new-occupation" id="new-occupation" />
  <input type="button" value="Dodaj" id="add-new-save" />
  <input type="button" value="Anuluj" id="add-new-cancel" />
  </div>
  <div class="field">
    <label for="occupation">Zawód</label>
    <select name="occupation" id="occupation">
      <option value="1">Opcja 1</option>
      <option value="2">Opcja 2</option>
      <option value="3">Opcja 3</option>
      <option value="4">Opcja 4</option>
    </select>
    <input type="button" value="+" id="add-new-show" />
  </div>
  <div class="field">
    <label for="information">Uwagi</label>
    <textarea name="information" id="information" rows="5" cols="10"></textarea>
  </div>
  <div>
    <input type="submit" value="Zapisz" />
  </div>
</form>

W powyższym formularzu zostały umieszczone trzy pola: tekstowe, select oraz textarea. W divie „add-new-subform” znajdzie się podformularz z polem tekstowym, który pojawi się w momencie dodawania nowego rekordu. Nie będę tu prezentował całego pliku CSS, można go zobaczyć w zaprezentowanym wcześniej przykładzie.

Ważne są dwie definicje. Po pierwsze, należy ukryć podformularz i przygotować go do wyświetlenia na pierwszym planie (wyskoki z-index):

div#add-new-subform {position: absolute; display: none; z-index: 100;
 background-color: #fff; border: solid 1px #000; padding: 15px;}

Dodatkowo zdefiniujemy obiekt, który „ściemni” całość widocznej strony. Ważne, aby znalazł się on na obecnie widocznym obszarze, ale pod nowym oknem formularza. Dlatego musi mieć odpowiednią wartość z-index i na początku pozostać niewidoczny. Definicje przeźroczystości zostały przedstawione w sposób, dzięki któremu powinny się wyświetlać poprawnie we wszystkich popularnych przeglądarkach:

div#cover {position: fixed; width: 100%; height: 100%;
z-index: 99; background-color: #000000; -moz-opacity: 0.7; 
opacity: 0.7; filter: alpha(opacity=70);}

Teraz pozostaje oprogramowanie funkcjonalności w jQuery (dokładny opis poniżej):

$(document).ready(function(){
    $('#add-new-show').click(function(){
	// dodanie ciemnego tła
	$('body').prepend('<div id="cover">&nbsp;</div>');
	// wyświetlenie podformularza
	$("#add-new-subform").css({'display': 'block'});
      
	$("#add-new-save").click(function(){
	  var new_occupation = $("#new-occupation").val();
	  if(typeof new_occupation !== "undefined" && new_occupation){
	    // dodanie nowego rekordu do bazy oraz wpisu w polu select 
	    addNewOccupation(new_occupation);
	    // usunięcie ciemnego tła i ukrycie podformularza
	    $('#cover').remove();
	    $("#add-new-subform").css({'display': 'none'});
	  };
	});
	
	$("#add-new-cancel").click(function(){
	    // usunięcie ciemnego tła i ukrycie podformularza
	    $('#cover').remove();
	    $("#add-new-subform").css({'display': 'none'});
	});
    });
});      

function addNewOccupation(new_occupation){
  // tutaj za pomoca AJAX mozna dodać do bazy nowy rekord
  // zapytanie powinno zwrócić id nowego zawodu
  var id = 100;	// id nowego zawodu dodanego do bazy
  $("#occupation").append(new Option(new_occupation,id));
  $("#occupation").val(id);
}

Na początek ustalamy działanie dla akcji kliknięcia w przycisk „+” (#add-new-show). Kolejno: dodajemy nową warstwę do dokumentu, która przykryje całą obecnie wyświetlaną stronę (patrz definicja styli dla #cover) oraz wyświetlamy podformularz.

Następnie definiujemy odpowiednie działania dla klikniętego przycisku zapisania nowego zawodu (#add-new-save). Gdy został on wpisany w pojawiającym się polu tekstowym, wywołujemy funkcję addNewOccupation(), po czym usuwamy ciemne tło i ukrywamy podformularz. Funkcja dodania nowego zawodu powinna zawierać wywołanie AJAX, zapisujące dane do bazy po uprzednim sprawdzeniu ich poprawności. Wynikiem powinno być id dodanego rekordu, dzięki czemu będziemy mogli parę id oraz nazwa zawodu dopisać do pola select na formularzu głównym, a następnie zaznaczyć ją jako wybraną. W zaprezentowanym przykładzie nie przedstawiono samego zapisu do bazy, a do zmiennej id przypisana została przykładowa wartość.

Powyższy przykład został zaprezentowany w bardzo uproszczony sposób, może stanowić podstawę do własnej implementacji ciekawego wywołania okna dialogowego. Dostosowanie do własnych potrzeb nie powinno stanowić większego problemu.