Abaixo uma solução a ser trabalhada, mas antes... um desabafinho, não levem a mau!
Eu fico indignado que por mais que você estude, tenha a capacidade de criar soluções, algum preconceituoso não lhe da oportunidade para atuar na área.
Estive tentando há mais de 13 anos(não desisti, porém não busco mais). Por ter em carteira, ofícios do tipo braçal,
muitos ou todos te qualificam como incapaz, sem ao menos ter ideia de sua competência.
Não falo do autor da pergunta, e sim daqueles que pegam a coisa pronta. Estes são os que as empresas investem. Nos oportunistas.
Segue um exemplo de como aplicar uma das soluções para o caso!
PS.: Desculpem o mau "profissionalismo" do código.
Seguem...
function CONFIRMA(txt, idform, confirmacao, ylegenda, nlegenda){
box = document.getElementById('bloco');
msg = document.getElementById('msg');
bt_y = document.getElementById('ylegenda');
bt_n = document.getElementById('nlegenda');
if(confirmacao==''&&txt!=0){
msg.innerHTML=txt;
bt_y.innerHTML=ylegenda;
bt_n.innerHTML=nlegenda;
box.style.display='block';
return false;
}
if(confirmacao == true){
document.getElementById(idform).submit();
}
box.style.display='none';
}
<div id="bloco" style="display: none;">
<div id="msg"></div>
<a href="javascript:void(0);" onClick="CONFIRMA(0, 'form1', true)"><span id="ylegenda"></span></a> -------------
<a href="javascript:void(0);" onClick="CONFIRMA(0, 'form1', false)"><span id="nlegenda"></span></a>
</div>
<div>
<p> </p>
<form id="form1" name="form1" method="post" onSubmit="return CONFIRMA('Vai fazer cagada?', this.id, false, 'Sim, sou imbecil', 'Puts...')" action="">
<input type="submit" name="Submit" value="Aplicar">
</form>
</div>
Falta apenas formatar com estilos css.
Boa sorte!