JavaScript
Modals - Prompts

Syntaxis

• alert (bericht)
• bevestigen (bericht)
• prompt (bericht [, optioneelWaarde])
• afdrukken()

Opmerkingen

Over gebruikersprompts

Gebruikersprompts zijn methoden die deel uitmaken van de Web Application API die worden gebruikt om browsermodals op te roepen die om een gebruikersactie vragen, zoals bevestiging of invoer.

window.alert(message)

Toon een modale pop-up met een bericht voor de gebruiker.
Vereist dat de gebruiker op [OK] klikt om te negeren.

alert("Hello World"); 

Meer informatie hieronder in "Melding gebruiken ()".

boolean = window.confirm(message)

Toon een modale pop-up met het verstrekte bericht.
Biedt [OK] en [Annuleren] knoppen die respectievelijk reageren met een Booleaanse waarde true / false .

confirm("Delete this comment?");

result = window.prompt(message, defaultValue)

Toon een modale pop-up met het verstrekte bericht en een invoerveld met een optionele vooraf ingevulde waarde.
Retourneert als result de result de gebruiker opgegeven invoerwaarde.

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

Meer informatie hieronder in "Gebruik van prompt ()".

window.print()

Opent een model met afdrukopties voor documenten.

print();

Aanhoudende prompt Modal

Bij gebruik van prompt kan een gebruiker altijd op Annuleren klikken en er wordt geen waarde geretourneerd.
Om lege waarden te voorkomen en persistent te maken :

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

jsFiddle-demo

Bevestig om element te verwijderen

Een manier om confirm() is wanneer een UI-actie een aantal destructieve wijzigingen op de pagina aanbrengt en beter vergezeld gaat van een melding en een gebruikersbevestiging - zoals bijv. Voordat een bericht wordt verwijderd:

<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);
});

jsFiddle-demo

Gebruik van melding ()

De methode alert() van het window geeft een waarschuwingsvak weer met een opgegeven bericht en een knop OK of Annuleren . De tekst van die knop is afhankelijk van de browser en kan niet worden gewijzigd.

Syntaxis

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

produceert

Een waarschuwingsvak wordt vaak gebruikt als u zeker wilt weten dat informatie naar de gebruiker komt.

Opmerking: Het waarschuwingsvak haalt de focus weg van het huidige venster en dwingt de browser het bericht te lezen. Gebruik deze methode niet te veel, omdat hierdoor de gebruiker geen toegang meer heeft tot andere delen van de pagina totdat het vak is gesloten. Ook stopt het de verdere uitvoering van de code, totdat de gebruiker op OK klikt. (met name de timers die zijn ingesteld met setInterval() of setTimeout() vinken ook niet aan). Het waarschuwingsvenster werkt alleen in browsers en het ontwerp kan niet worden gewijzigd.

Winstwaarde

alert retourneert geen waarde

Gebruik van prompt ()

Prompt zal een dialoogvenster weergeven voor de gebruiker die om input vraagt. U kunt een bericht opgeven dat boven het tekstveld wordt geplaatst. De retourwaarde is een tekenreeks die de invoer voorstelt die door de gebruiker wordt geleverd.

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

U kunt aan prompt() een tweede parameter doorgeven, die als standaardtekst wordt weergegeven in het tekstveld van de prompt.

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