JSFiddle - React, Tailwind, and code Playground
HTML
<form action="" method="POST">
<button type="submit" onclick="return chiediConferma(this)">Elimina</button>
</form>
<div id="modale">
<fieldset>
<label>I dati verranno eliminati. Vuoi continuare?</label>
<button type="button" onclick="conferma()">OK</button>
<button type="button" onclick="chiudi()">Annulla</button>
</fieldset>
</div>
CSS
#modale {position:fixed; top:0; right:0; left:0; bottom:0; background-color:rgba(0, 0, 0, 0.7); display:none; }
fieldset {background-color:#fff; margin:auto; width:300px; display:block;}
fieldset label {display:block; font-size:22px; margin-bottom:10px;}
fieldset button {padding:10px;}
JavaScript
var bottoneCorrente;
function chiediConferma(bottone) {
//se l'attributo non era presente...
if (bottone.getAttribute("data-conferma") == null) {
//mostro la modale
bottoneCorrente = bottone;
document.getElementById("modale").style.display = "block";
return false;
}
//non faccio nulla, il postback può avere luogo
return true;
}
function conferma(){
chiudi();
bottoneCorrente.setAttribute("data-conferma", "");
bottoneCorrente.click();
}
function chiudi() {
document.getElementById("modale").style.display = "none";
}