Custom JS alert box by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

dirnameInvia informazioni sulla direzione di scrittura da un elemento input
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
placeholderDefinisce un testo segnaposto per un elemento input o textarea
<p>Serve a definire paragrafi di testo
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

JS Strutture dati e funzioni es3

pagina di prova

Esercizi 05/03/2024 es8

Calcolo Codice Fiscale

hate this project

Tabella con ricerca

fibonacci manoel

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<h1>
  Alert personalizzato
</h1>
<p>
  Lorem ipusm Tortor purus varius sagittis latinium rhoncus pharetra at blandit pharetra nulla vehicula et dolor nisi praesent risus fai varius vine commodo erat rubus magna vitae prose pulvinar class nisi mus himenaeos dictum risus aliquet vitae quisque sed placerat auctor fringilla aliquet senectus alon dui post elit senectus ante prie sem aenean mi curabitur risus amet urna aqua Sed et dis nullam sit magnis ut pretium lercius quisque suspendisse lobortis aqua auctor prie conubia augue et post Etiam els diam efficitur rhoncus romani convallis primis sed porta augue sit justo cubilia latinium alon etiam senectus aenean faucibus justo pellentesque sollicitudin duis arquitus odio praesent aptent arquitus aliquet ut viverra placerat vitae erat vestibulum nisi dapibus ullamcorper magnis ut turpis suscipit amet justo magnis aqua diam romani ambus vivamus consequat molestie risus post nisi interdum egestas porta aquitrinum nisi tempor non inceptos venir et post magna hendrerit curabitur sollicitudin condimentum deius placerat ante eget porttitor ante donec augue porttitor posuere at arcu etiam diam leo integer et nibh sagittis netus sit eleifend arquitus nascetur vehicula metus curabitur rutrum arquitus post porta elit vine eros venir sed risus sollicitudin varius commodo praesent lorem lercius vitae arcu consequat filo ut conubia maecenas casua lectus elit potenti turpis gravida convallis scelerisque efficitur semper ital filo volutpat madres litora diam phasellus nec eu placerat ante tempor per sem
</p> 
<button onclick="alert('Questo è un alert. Clicca per proseguire.'), alert('Ciao Ciao')">
  alert
</button>
<button onclick="prompt('Scrivi qualcosa:', 'Scrivi qui')">
  prompt
</button>
<button onclick="confirm('Confermi?')">
  confirm
</button>

//Priorità
var vis = 1000;

//ALERT
window.alert = function (message) {
  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--;
  a.addEventListener("click", function() {
    a.remove();
  }
  )

};

//PROMPT
window.prompt = function (message, def) {
  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+ ";";
  //input style
  i.style.cssText = "width:100%; margin-top:10px;";
  if (def) {
  	i.placeholder = def;
  }
  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();
    }	
  }
)
};

//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+ ";";
  //buttons style
  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--;
  
// case YES  
  y.addEventListener("click", function(e) {
      alert("Hai confermato");
      //fai qualcosa...
  	 a.remove();
  }
)
  //case NO
  n.addEventListener("click", function(e,resp) {
   		a.remove();

  }
)  
};