JavaScript
Modals - Prompt

Sintassi

• avviso (messaggio)
• conferma (messaggio)
• prompt (messaggio [, optionalValue])
• stampare()

Osservazioni

Informazioni sui prompt utente

I prompt utente sono metodi parte dell'API dell'applicazione Web utilizzata per richiamare le modalitа del browser che richiedono un'azione dell'utente come conferma o immissione.

window.alert(message)

Mostra un popup modale con un messaggio all'utente.
Richiede all'utente di fare clic su [OK] per chiudere.

alert("Hello World"); 

Ulteriori informazioni di seguito in "Uso di avviso ()".

boolean = window.confirm(message)

Mostra un popup modale con il messaggio fornito.
Fornisce i pulsanti [OK] e [Annulla] che risponderanno rispettivamente con un valore booleano true / false .

confirm("Delete this comment?");

result = window.prompt(message, defaultValue)

Mostra un popup modale con il messaggio fornito e un campo di input con un valore pre-riempito opzionale.
Restituisce come result il valore di input fornito dall'utente.

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

Ulteriori informazioni di seguito in "Uso di prompt ()".

window.print()

Apre una modale con le opzioni di stampa del documento.

print();

Persistent Prompt Modal

Quando si utilizza prompt un utente può sempre fare clic su Annulla e nessun valore verrà restituito.
Per evitare valori vuoti e renderlo più persistente :

<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 di jsFiddle

Conferma per eliminare l'elemento

Un modo per usare confirm() è quando alcune azioni dell'interfaccia utente apportano alcune modifiche distruttive alla pagina e sono meglio accompagnate da una notifica e da una conferma dell'utente - come ad esempio prima di eliminare un messaggio postale:

<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 di jsFiddle

Uso di avviso ()

Il metodo alert() dell'oggetto window visualizza una finestra di avviso con un messaggio specificato e un pulsante OK o Annulla . Il testo di quel pulsante dipende dal browser e non può essere modificato.

Sintassi

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

produce

Una casella di avviso viene spesso utilizzata se si desidera assicurarsi che le informazioni arrivino all'utente.

Nota: la casella di avviso distoglie l'attenzione dalla finestra corrente e forza il browser a leggere il messaggio. Non utilizzare eccessivamente questo metodo, in quanto impedisce all'utente di accedere ad altre parti della pagina fino a quando la casella non viene chiusa. Inoltre ferma l'ulteriore esecuzione del codice, fino a quando l'utente non fa clic su OK . (in particolare, i timer impostati con setInterval() o setTimeout() non spuntano). La finestra di avviso funziona solo nei browser e il suo design non può essere modificato.

Valore di ritorno

alert funzione di alert non restituisce alcun valore

Utilizzo di prompt ()

Prompt mostrerà una finestra di dialogo all'utente che richiede il loro input. È possibile fornire un messaggio che verrà posizionato sopra il campo di testo. Il valore di ritorno è una stringa che rappresenta l'input fornito dall'utente.

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

È anche possibile passare a prompt() un secondo parametro, che verrà visualizzato come testo predefinito nel campo di testo del prompt.

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