JavaScript
Modaler - Frågar

Syntax

• varning (meddelande)
• bekräfta (meddelande)
• prompt (meddelande [, optionalValue])
• skriva ut()

Anmärkningar

Om användarfrågor

Användarfrågor är metoder som ingår i webbapplikations-API: et som används för att åberopa webbläsarmodaler som begär en användaråtgärd som bekräftelse eller inmatning.

window.alert(message)

Visa en modal popup med ett meddelande till användaren.
Kräver att användaren klickar på [OK] för att avsluta.

alert("Hello World"); 

Mer information nedan i "Använd varning ()".

boolean = window.confirm(message)

Visa en modal popup med det medföljande meddelandet.
Tillhandahåller [OK] och [Avbryt] -knappar som svarar med ett booleskt värde true / false respektive.

confirm("Delete this comment?");

result = window.prompt(message, defaultValue)

Visa en modal popup med det medföljande meddelandet och ett inmatningsfält med valfritt förfyllt värde.
Returnerar som result det angivna användarvärdet.

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

Mer information nedan i "Användning av prompt ()".

window.print()

Öppnar en modal med utskriftsalternativ för dokument.

print();

Persistent Prompt Modal

När du använder en prompt kan en användare alltid klicka på Avbryt och inget värde kommer att returneras.
För att förhindra tomma värden och göra det mer uthålligt :

<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

Bekräfta att radera elementet

Ett sätt att använda confirm() är när vissa UI-åtgärder gör några förstörande ändringar på sidan och åtföljs bättre av ett meddelande och en användarbekräftelse - som t.ex. innan du raderar ett inlägg:

<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

Användning av varning ()

alert() för window visar en varningsruta med ett specificerat meddelande och en OK- eller Avbryt- knapp. Texten på den knappen beror på webbläsaren och kan inte ändras.

Syntax

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

producerar

En varningsruta används ofta om du vill se till att information kommer till användaren.

Obs: Varningsrutan tar bort fokuset från det aktuella fönstret och tvingar webbläsaren att läsa meddelandet. Använd inte den här metoden för mycket, eftersom den förhindrar användaren att komma åt andra delar av sidan tills rutan är stängd. Dessutom stoppar den ytterligare kodutförandet tills användaren klickar på OK . (i synnerhet setTimeout() inte antingen timers som har ställts in med setInterval() eller setTimeout() ). Varningslådan fungerar bara i webbläsare, och dess design kan inte ändras.

Returvärde

alert returnerar inget värde

Användning av prompt ()

Fråga kommer att visa en dialogruta till användaren som begär sin inmatning. Du kan ge ett meddelande som kommer att placeras ovanför textfältet. Returvärdet är en sträng som representerar ingången som tillhandahålls av användaren.

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

Du kan också skicka prompt() en andra parameter, som kommer att visas som standardtext i promptens textfält.

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