JavaScript
Modały - monity

Składnia

• alert (wiadomość)
• potwierdź (wiadomość)
• monit (komunikat [, opcjonalnieWartość])
• wydrukować()

Uwagi

Informacje o podpowiedziach użytkowników

Monity użytkownika są metodami wchodzącymi w skład interfejsu API aplikacji sieci Web służącym do wywoływania modów przeglądarki żądających akcji użytkownika, takiej jak potwierdzenie lub wejście.

window.alert(message)

Pokaż modalne wyskakujące okienko z komunikatem dla użytkownika.
Wymaga od użytkownika kliknięcia [OK], aby zamknąć.

alert("Hello World"); 

Więcej informacji poniżej w „Korzystanie z alertów ()”.

boolean = window.confirm(message)

Pokaż modalne wyskakujące okienko z dostarczonym komunikatem.
Zapewnia przyciski [OK] i [Cancel], które będą odpowiadały odpowiednio wartością logiczną true / false .

confirm("Delete this comment?");

result = window.prompt(message, defaultValue)

Pokaż modalne wyskakujące okienko z dostarczonym komunikatem i polem wejściowym z opcjonalną wstępnie wypełnioną wartością.
Zwraca jako result podaną przez użytkownika wartość wejściową.

prompt("Enter your website address", "http://");

Więcej informacji poniżej w „Użycie znaku zachęty ()”.

window.print()

Otwiera modal z opcjami drukowania dokumentu.

print();

Trwały tryb monitu

Podczas korzystania z monitu użytkownik zawsze może kliknąć Anuluj i żadna wartość nie zostanie zwrócona.
Aby zapobiec pustym wartościom i uczynić je bardziej trwałym :

<h2>Welcome <span id="name"></span>!</h2>

<script>
// Persistent Prompt modal
var userName;
while(!userName) {
  userName = prompt("Enter your name", "");
  if(!userName) {
    alert("Please, we need your name!");
  } else {
    document.getElementById("name").innerHTML = userName;
  }
}
</script>

Demo jsFiddle

Potwierdź, aby usunąć element

Sposobem użycia confirm() jest to, że niektóre działania interfejsu użytkownika powodują destrukcyjne zmiany na stronie i lepiej jest im towarzyszyć powiadomienie i potwierdzenie użytkownika - np. Przed usunięciem wiadomości:

<div id="post-102">
  <p>I like Confirm modals.</p>
  <a data-deletepost="post-102">Delete post</a>
</div>
<div id="post-103">
  <p>That's way too cool!</p>
  <a data-deletepost="post-103">Delete post</a>
</div>

// Collect all buttons
var deleteBtn = document.querySelectorAll("[data-deletepost]");

function deleteParentPost(event) {
  event.preventDefault(); // Prevent page scroll jump on anchor click
  
  if( confirm("Really Delete this post?") ) {
    var post = document.getElementById( this.dataset.deletepost );
    post.parentNode.removeChild(post);
    // TODO: remove that post from database
  } // else, do nothing
  
}

// Assign click event to buttons
[].forEach.call(deleteBtn, function(btn) {
  btn.addEventListener("click", deleteParentPost, false);
});

Demo jsFiddle

Zastosowanie alert ()

Metoda alert() obiektu window wyświetla window ostrzeżenia z określonym komunikatem i przyciskiem OK lub Anuluj . Tekst tego przycisku zależy od przeglądarki i nie można go modyfikować.

Składnia

alert("Hello world!");
// Or, alternatively...
window.alert("Hello world!");

Produkuje

Pole ostrzeżenia jest często używane, jeśli chcesz mieć pewność, że użytkownik otrzyma informacje.

Uwaga: Pole ostrzeżenia odsuwa fokus od bieżącego okna i zmusza przeglądarkę do odczytania wiadomości. Nie należy nadużywać tej metody, ponieważ uniemożliwia ona użytkownikowi dostęp do innych części strony, dopóki pudełko nie zostanie zamknięte. Zatrzymuje także dalsze wykonywanie kodu, dopóki użytkownik nie kliknie przycisku OK . (w szczególności liczniki ustawione za pomocą setInterval() lub setTimeout() nie zaznaczają). Pole alertu działa tylko w przeglądarkach, a jego projektu nie można modyfikować.

Zwracana wartość

funkcja alert nie zwraca żadnej wartości

Zastosowanie znaku zachęty ()

Monit wyświetli okno dialogowe z prośbą o wprowadzenie danych. Możesz podać wiadomość, która zostanie umieszczona nad polem tekstowym. Zwracana wartość to ciąg reprezentujący dane wejściowe dostarczone przez użytkownika.

var name = prompt("What's your name?");
console.log("Hello, " + name);

Możesz także przekazać prompt() drugi parametr, który będzie wyświetlany jako domyślny tekst w polu tekstowym pytania.

var name = prompt('What\'s your name?', ' Name...');
console.log('Hello, ' + name);