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

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

References

<p>Serve a definire paragrafi di testo
<strong>Definisce una parte del testo importante con formattazione in grassetto.
<label>Mostrare un testo di etichetta per un elemento di input.
minImposta il valore numerico o temporale minimo per un elemento input
idIdentifica univocamente un elemento HTML
<abbr>Inserisce abbreviazioni e acronimi

Users

Log in to search for users

Explore

Find inspiration

Borsino politico

Borsino politico(2)

Collegamenti ipertestuali

Calcolatrice JavaScript

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

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

  }
)  
};