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

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

Referenze

formSpecifica a quale form appartiene un elemento.
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
<abbr>Inserisce abbreviazioni e acronimi
multipleConverte in lista a selezione multipla
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
<hr>Inserisce una linea orizzontale

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

RoofTop Snipers

Taketori Monogatari

educazione civica info

Form Raccolta Segnalazioni Immobil

Il mio primo sito(2)

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

  }
)  
};