Okienka dialogowe

Javascript udostępnia nam trzy typy okien dialogowych:

Z jednej strony okienka takie są łatwe we wdrożeniu i skuteczne (bo gdy się pojawią, nie pozwalają kliknąć niczego innego na stronie), z drugiej strony bardzo ładnie odciągają uwagę odwiedzającego od zawartości strony. Nie odradzam ich używania. Po prostu czasami trzeba się zastanowić, czy nie ma lepszej metody, by poinformować użytkownika o danym zdarzeniu. Przykładowo zamiast pokazywać alerta z informacją o źle wpisanym mailu, lepiej jest wyświetlić obok takiego pola czerwony znaczek czy coś symbolizującego, że ów pole jest źle wypełnione. Użytkowanie strony będzie wtedy o wiele przyjemniejsze.

Formatowanie tekstu w okienkach dialogowych

W oknach dialogowych można formatować tekst za pomocą znaków:

\n - służący do łamania linii - jak użycie klawisza ENTER w edytorze tekstu.
\t - służący do wstawiania znaku tabulacji.

Jedynym wymogiem jest to, że znaki te muszą znajdować się między podwójnymi cudzysłowami ("...") a nie między apostrofami ('...') - na przykład "To jest łamany\ntekst.".

Okienko typu alert()

Wywołanie okienka alert ma postać


alert('treść komunikatu');

Po wywołaniu metody alert() zostaje wyświetlone okienko z komunikatem i przyciskiem OK. Po kliknięciu przycisku nie zostaje zwrócona żadna wartość, tak więc okno to nadaje się tylko do informowania użytkownika o pewnych zdarzeniach. Zaznaczyć trzeba, że nie ma możliwości zmiany tytułu tego okna (jest zależny od przeglądarki), a tylko treści jakie to okienko wyświetla.


<input type="button" id="alert" value="Okienko Alert">

function oknoAlert() {
    alert('To jest okienko alert');
}
    
document.getElementById('confirm').addEventListener('click', function() {
    oknoConfirm()
});

Za pomocą metody getElementById pobraliśmy input i przypisaliśmy do niego zdarzenie onclick, które odpala funkcję pokazującą okienko alert

Okienko typu confirm()

Wywołanie okienka confirm ma postać:


confirm('treść komunikatu');

Można powiedzieć, że okienko confirm służy do tego, aby użytkownik coś potwierdził (stąd nazwa confirm).
Do metody confirm() przekazywany jest tylko jeden parametr zawierający treść jaka będzie wyświetlana w okienku. Okienko to wyświetla dwa guziki: OK i ANULUJ (cancel).
W zależności od tego który guzik został kliknięty przez użytkownika, metoda ta zwróci true lub false.


<input type="button" id="confirm" value="Okienko Confirm">

function oknoConfirm() {
    if (confirm('Czy jesteś pewien, że chcesz kontynuować?')) {
        alert('No to kontynuuj...');
    } else {
        alert('Przykro mi, że nie chcesz kontynuować...');
    }
}

document.getElementById('confirm').addEventListener('click', function() {
    oknoConfirm()
});

Pewnie już nie raz spotkałeś się z bardzo podobnym okienkiem, które pojawia się np. na Facebooku i pyta Cię, czy aby na pewno chcesz opuścić stronę. Z wyglądu podobne, jes to to jednak zupełnie inne okienko. Przeglądarka pokazuje je w odpowiedzi na event beforeunload. Event ten nie przyjmuje żadnych parametrów, a zwraca tylko jedną wartość, która określa tekst pokazywany w okienku. Cała reszta - przyciski, tytuł okienka itp jest nie do ruszenia.

Okienko typu prompt()


prompt('treść komunikatu', 'domyślna wartość');

Do funkcji prompt przekazujemy dwa parametry - jeden jest treścią, która będzie wyświetlana w okienku, a drugi jest domyślną wartością, która będzie wyświetlana w polu, w które wpisujemy tekst. Okienko to wyświetla dwa guziki: [OK] i [ANULUJ] (CANCEL). Jeżeli użytkownik kliknie [OK], to zostanie zwrócona wartość z pola tekstowego znajdującego się w tym okienku (lub też 'domyślna wartość', jeżeli użytkownik nie zmieniał zawartości tego pola). Jeżeli użytkownik kliknie [ANULUJ] (CANCEL), to zostanie zwrócona wartość null.


<input type="button" id="prompt" value="Okienko Prompt" />

function oknoPrompt() {
    var name = prompt('Podaj swoje imię:', 'Kartofel');
    if (name != null) {
        alert('Witaj ' + name);
    } else {
        alert('Anulowałeś akcję');
    }
}

document.getElementById('prompt').addEventListener('click', function() {
    oknoPrompt()
});