MOCKSTACKS
EN
Questions And Answers

More Tutorials









Javascript Modals - Prompts

User Prompts are methods part of the Web Application API used to invoke Browser modals requesting a user action such as confirmation or input.


window.alert(message)

Show a modal popup with a message to the user.
Requires the user to click [OK] to dismiss.


alert("Hello World");

Output

More information below in "Using alert()".
boolean = window.confirm(message)

Show a modal popup with the provided message.
Provides [OK] and [Cancel] buttons which will respond with a boolean value true / false respectively.


confirm("Delete this comment?");

Output


result = window.prompt(message, defaultValue)

Show a modal popup with the provided message and an input field with an optional pre-filled value.
Returns as result the user provided input value.


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

Output


window.print()

Opens a modal with document print options


print();

Output


Persistent Prompt Modal

When using prompt a user can always click Cancel and no value will be returned.
To prevent empty values and make it more persistent:


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

Output


Confirm to Delete element

A way to use confirm() is when some UI action does some destructive changes to the page and is better accompanied by a notification and a user confirmation - like i.e. before deleting a post message:


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

Usage of alert()

The alert() method of the window object displays an alert box with a specified message and an OK or Cancel button. The text of that button depends on the browser and can't be modified.


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

Output

Javascript Modals - Prompts

An alert box is often used if you want to make sure information comes through to the user.


Usage of prompt()

Prompt will display a dialog to the user requesting their input. You can provide a message that will be placed above the text field. The return value is a string representing the input provided by the user.


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

Output


You can also pass prompt() a second parameter, which will be displayed as the default text in the prompt's text field.


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

Output



Conclusion

In this page (written and validated by ) you learned about Javascript Modals - Prompts . What's Next? If you are interested in completing Javascript tutorial, your next topic will be learning about: Javascript History.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.