Personalizzare finestre di Alert, Prompt e Confirm con JavaScript

In JavaScript esistono numerose funzioni native per eseguire particolari compiti e operazioni senza la necessità di ulteriore programmazione da parte degli sviluppatori.

Un esempio è quella per la comparsa di messaggi/avvisi tramite finestre popup, chiamati “alerts“, perfettamente integrate con i browser web moderni.

Gli alerts, e anche le finestre di conferma (confirm) e prompt, sono strumenti molto utili, che compaiono in precisi momenti con uno stile ben definito dal browser in uso. Proprio per questo si potrebbe pensare che, queste finestre non possano essere modificate in alcun modo dagli sviluppatori, ma la realtà è ben diversa, perché con JavaScript è possibile creare delle finestre di alert, prompt e confirm personalizzate. In questo articolo vedremo come fare.

Finestre di Alert, Prompt e Confirm personalizzate con JavaScript

Leggendo tra le nostre numerose guide dedicate a JavaScript, è possibile capire le reali potenzialità di questo linguaggio, che consente di manipolare realmente tutti gli elementi presenti in una pagina web HTML.

Personalizzare le finestre di alert, o di prompt e di confirm è possibile. Nello specifico, è possibile creare finestre personalizzate con CSS, che contengano lo stesso messaggio presente nell’alert box, che compaiano in sostituzione di quelle del browser.

alert personalizzato esempio
Esempio di una finestra di alert personalizzata

Per far questo abbiamo bisogno di programmare specifiche funzioni in puro JavaScript, ma con alcune differenze importanti tra gli alerts, prompt e confim messages.

Proprio per questo motivo, suddivideremo i tre elementi in 3 paragrafi distinti.

DEMO

Qui in basso la dimostrazione pratica delle funzioni personalizzate per la comparsa di finestre popup. La demo è generata da codewith.it. Puoi trovare il codice sorgente aggiornato cliccando qui.

Alert

Il codice per la personalizzazione degli alerts con JavaScript è il seguente:

//Priorità di visibilità
var vis = 1000;

//ALERT
window.alert = function (message) {
//Creazione dell'elemento
  var a = document.createElement('div');
  //regole di stile CSS
  a.style.cssText = "width:30vw; height:100px; border:1px solid #bbb; border-radius:5px; padding:10px; background:white; box-shadow:0px 0px 8px #0006; position:fixed; top:20px; right:0; left:0; margin:auto; font-family: \"Arial\", sans-serif; color:black; z-index:"+ vis+ ";";

  a.innerHTML = "<b>Alert</b><br>"+message;
  document.body.appendChild(a);

  vis--;

  //Rimozione dell'elemento al click
  a.addEventListener("click", function() {
    a.remove();
    }
  )
};

Il codice è suddiviso in più parti:

  • La prima riga serve ad ordinare le finestre in ordine di comparsa, la variabile “vis” scalerà di un unità ad ogni popup.
    Necessaria per una corretta visualizzazione, sia per gli alerts, che per prompt e confirm, che vedremo successivamente.
  • La seconda parte del codice, serve a creare e a definire lo stile della finestra alert.
  • L’ultima sezione, servirà a rimuovere del tutto la finestra generata, tramite un semplice click con il tasto sinistro del mouse.

Per richiamare un alert personalizzato, ti basta crearlo come hai sempre fatto, con la funzione “alert();” in JavaScript.

Visualizza la demo in alto.

Prompt

Prompt(), come ben saprai, è la funzione JavaScript per l’inserimento di valori nella finestra di popup, con un area di input per l’utente. Come il precedente alert() è possibile personalizzare le finestre di prompt, ma con a causa dell’area di input sorgono dei problemi più pratici.

finestra prompt personalizzata

Per questo motivo non possiamo assicurare un’integrazione completa e un funzionamento privo di “intoppi” per la funzione di prompt, ma possiamo comunque provarci.

Qui la versione aggiornata del codice, aggiornamenti ed eventuali miglioramenti.

Il codice:

// Priorità di visualizzazione
var vis = 1000;

//PROMPT
window.prompt = function (message, placeh) {
  var a = document.createElement('div');
  var i = document.createElement('input');

  //regole di stile CSS
  a.style.cssText = "width:30vw; height:100px; border:1px solid #bbb; border-radius:5px; padding:10px; background:white; box-shadow:0px 0px 8px #0006; position:fixed; top:20px; right:0; left:0; margin:auto; font-family: \"Arial\", sans-serif; color:black; z-index:"+ vis+ ";";

 // regole CSS per l'area di input
  i.style.cssText = "width:100%; margin-top:10px;";

  if (placeh) {
  	i.placeholder = placeh;
  }
  a.innerHTML = "<b>Prompt</b><br>"+message;
  document.body.appendChild(a);
  a.appendChild(i);
    vis--;
  i.addEventListener("keypress", function(e) {
    if (e.key === 'Enter') {
      alert(i.value);
        a.remove();
    }	
  }
)
};

Come puoi vedere, la struttura del codice è molto simile alla precedente di alert, ma con l’aggiunta dell’area di input per la scrittura del messaggio.

Per creare una finestra di prompt in JavaScript: prompt();

N.B. La prima riga è sempre dedicata alla variabile per la priorità di visualizzazione, da eliminare nel caso sia già stata definita con alert precedentemente.

Confirm

Con confirm() il discorso è molto simile a “Prompt”, cioè all’atto pratico può portare a malfunzionamenti. Tuttavia può essere usato per la personalizzazione delle pagine e a livello dimostrativo.

finestra confirm personalizzata

Il codice JavaScript:

// Priorità di visualizzazione
var vis = 1000;

//CONFIRM
window.confirm = function(message) {
  var a = document.createElement('div');
  var y = document.createElement('button');
  var n = document.createElement('button');  
  //regole di stile CSS
  a.style.cssText = "width:30vw; height:100px; border:1px solid #bbb; border-radius:5px; padding:10px; background:white; box-shadow:0px 0px 8px #0006; position:fixed; top:20px; right:0; left:0; margin:auto; font-family: \"Arial\", sans-serif; color:black;z-index:"+ vis+ ";";

  //stile dei buttons
  y.style.cssText = "position:absolute; bottom:0; right:0; width:50%; margin:2px;clear:both;";
  n.style.cssText = "position:absolute; bottom:0; left:0; width:50%; margin:2px;clear:both;";

  a.innerHTML = "<b>Confirm</b><br>"+message;
    y.innerHTML = "Conferma";
    n.innerHTML = "Annulla";
  document.body.appendChild(a);
  a.appendChild(y);
  a.appendChild(n);
    vis--;
  
// caso YES  
  y.addEventListener("click", function(e) {
      alert("Hai confermato");
      //fai qualcosa...
  	 a.remove();
  }
)
  //caso NO
  n.addEventListener("click", function(e,resp) {
   		a.remove();

  }
)  
};

Anche in questo caso, il codice è molto simile a quello già visto. Qui troviamo i due pulsanti “conferma” e “annulla” presenti nelle finestre di conferma dei browser, con regole di stile CSS dedicate.

Per creare una finestra di conferma in JavaScript: confirm();

N.B. Anche qui troviamo la variabile “vis” in prima posizione. Questa dovrà trovarsi solo una volta nel listato, perciò se hai copiato i precedenti codici, fa in modo che la variabile venga definita solo una volta.

Potrebbe interessarti: Come catturare console.log() in un div HTML.

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA