JavaScript
Modales - Avisos

Sintaxis

• mensaje de alerta )
• confirmar (mensaje)
• mensaje (mensaje [, opcionalValor])
• impresión()

Observaciones

Acerca de las solicitudes del usuario

Las solicitudes de usuario son métodos que forman parte de la API de aplicación web que se utiliza para invocar los modos del navegador y que solicitan una acción del usuario, como confirmación o entrada.

window.alert(message)

Muestra una ventana emergente modal con un mensaje para el usuario.
Requiere que el usuario haga clic en [Aceptar] para descartar.

alert("Hello World"); 

Más información a continuación en "Uso de alerta ()".

boolean = window.confirm(message)

Muestra una ventana emergente modal con el mensaje proporcionado.
Proporciona los botones [OK] y [Cancel] que responderán con un valor booleano true / false respectivamente.

confirm("Delete this comment?");

result = window.prompt(message, defaultValue)

Muestre una ventana emergente modal con el mensaje proporcionado y un campo de entrada con un valor precargado opcional.
Devuelve como result el valor de entrada proporcionado por el usuario.

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

Más información a continuación en "Uso de prompt ()".

window.print()

Abre un modal con opciones de impresión de documentos.

print();

Persistente puntual modal

Cuando se utiliza el indicador, un usuario siempre puede hacer clic en Cancelar y no se devolverá ningún valor.
Para evitar valores vacíos y hacerlo más 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 jsFiddle

Confirmar para eliminar elemento

Una forma de usar confirm() es cuando alguna acción de la interfaz de usuario realiza algunos cambios destructivos en la página y se acompaña mejor con una notificación y una confirmación del usuario , como por ejemplo, antes de eliminar un mensaje de publicación:

<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

Uso de alerta ()

El método alert() del objeto de window muestra un cuadro de alerta con un mensaje específico y un botón Aceptar o Cancelar . El texto de ese botón depende del navegador y no se puede modificar.

Sintaxis

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

Produce

A menudo se usa un cuadro de alerta si desea asegurarse de que la información llegue al usuario.

Nota: el cuadro de alerta quita el foco de la ventana actual y obliga al navegador a leer el mensaje. No use en exceso este método, ya que impide que el usuario acceda a otras partes de la página hasta que se cierre el cuadro. También detiene la ejecución del código adicional, hasta que el usuario haga clic en Aceptar . (en particular, los temporizadores que se configuraron con setInterval() o setTimeout() tampoco setTimeout() ). El cuadro de alerta solo funciona en los navegadores y su diseño no se puede modificar.

Valor de retorno

alert función de alert no devuelve ningún valor.

Uso de prompt ()

El mensaje mostrará un cuadro de diálogo para el usuario que solicita su entrada. Puede proporcionar un mensaje que se colocará sobre el campo de texto. El valor de retorno es una cadena que representa la entrada proporcionada por el usuario.

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

También puede pasar un segundo parámetro a la prompt() , que se mostrará como el texto predeterminado en el campo de texto de la solicitud.

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