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

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

Referenze

selectedPre-seleziona un elemento di input
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
<br>Inserisce uno spazio vuoto tra due elementi HTML.
disabledImpedisce la modifica di un input
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
titleIndica informazioni aggiuntive riguardo un elemento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Borsino politico(2)

SCHEDA 4 INFORMATICA

Lezione 3/11 pt.2

STATI HTML TEST TABELLA

Questionario Serie A

CAPPUCCETTO ROSSO

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

  }
)  
};