5

Como consigo personalizar o confirm, substituindo o texto de botão Ok e Cancel? Queria também executar a função somente se clicar em Ok.

Segue baixo o codigo sem sucesso ainda

<script>
function funcao_a() {
  confirm('funcao A');
}
function funcao_b() {
  alert('funcao B');
}
</script>
<button id="btn" onclick="confirm('Confirmar?',funcao_b());">Clique aqui</button>

5 Respostas 5

6

Com a função nativa não dá para criar caixas de confirmação personalizadas, pode no entanto usar jquery UI para simular isso:

function funcao_b() {
  alert('funcao B');
}
function confirmar() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Yap executa função b": function() {
          $( this ).dialog( "close" );
          funcao_b();
        },
        'Não executa nada': function() {
          $( this ).dialog( "close" );
          console.log('cancelado');
        }
      }
    });
}
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<button id="btn" onclick="confirmar();">Clica</button>
<div id="dialog-confirm" title="Executar função?"></div>

1

Não, você não vai conseguir trocar o texto dos botões do confirm() nativo, o que você pode é criar um dialog com alguma lib ou criar você mesmo. Dê uma olhada nessa questão: Colocar dois botões Sim e Não em uma mensagem Javascript.

Quanto a função executada de acordo com a escolha, do confirm nativo, basta fazer assim:

function confirmar(texto, callback1, callback2){
  var confirmacao = confirm(texto);
  if(confirmacao) callback1(); // executa a primeira função de "OK"
  else callback2(); // executa a segunda função se "Cancelar"
}

function apagar(){
  confirmar(
    "Deseja apagar?",
    function(){
      alert("Apagado!");
    },
    function(){
      alert("Não apagado!"); 
    }
  )  
}
<button onclick="apagar()" >Apagar</button>

O confirm() returna um valor boolean, logo basta verificar esse valor e executar a função de acordo com o desejado.

0

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>&nbsp;</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!

1
  • 1
    Obrigado pela sugestão de edição @felipe-assunção
    – Gugo
    Commented 5/08/2017 às 3:17
-1
function confirmar(texto, callback1, callback2){
    var confirmacao = prompt(texto);
    if(confirmacao)
        callback1(); // executa a primeira função de "OK"
    else
        callback2(); // executa a segunda função se "Cancelar"
}

function apagar(){
    confirmar("Deseja apagar?", 
        function(){ alert("Apagado!"); }, 
        function(){ alert("Não apagado!"); });
}
-3

/*  txt :Texto a ser enviado.
        idform: se for enviar para um form.
        pgDestino: se for enviar para uma página de destino, se preencher os dois idform e pgDestino vai para pgDestino
        ylegend: se falar sim
        nlegenda se falar não
        Exemplo: <input type="button" name="Enviar" onclick="fnConfirma('Deseja iniciar o atendimento?', this.id, false, 'Sim, desejo iniciar o atendimento.', 'Desejo só consultar o cliente.')" value="Iniciar">
    */
function fnConfirma(txt, ylegenda, nlegenda, pgDestinoY, pgDestinoN) {

  box = document.getElementById('bloco');
  msg = document.getElementById('msg');
  bt_y = document.getElementById('ylegenda');
  bt_n = document.getElementById('nlegenda');
  paginaDestinoY = document.getElementById('paginaDestinoConfirmacaoEnvioY');
  paginaDestinoN = document.getElementById('paginaDestinoConfirmacaoEnvioN');
  paginaDestinoN.value = '';
  paginaDestinoY.value = '';
  if (pgDestinoY != '') {
    paginaDestinoY.value = pgDestinoY;
  }
  if (pgDestinoN != '') {
    paginaDestinoN.value = pgDestinoN;
  }

  msg.innerHTML = txt;
  bt_y.innerHTML = ylegenda;
  bt_n.innerHTML = nlegenda;
  box.style.display = 'block';
  return false;


}

function fnConfirmaEEnvia(confirmacao) {

  paginaDestinoY = document.getElementById('paginaDestinoConfirmacaoEnvioY');
  paginaDestinoN = document.getElementById('paginaDestinoConfirmacaoEnvioN');
  if (confirmacao == true) {
    if (paginaDestinoY.value != '') {
      varpaginaDestino = paginaDestinoY.value;
      window.location = varpaginaDestino;
    } else {
      // não é para ir para nenhum lugar.
      return false;
    }
  } else {
    if (paginaDestinoN.value != '') {
      varpaginaDestino = paginaDestinoN.value;
      window.location = varpaginaDestino;
    } else {
      // não é para ir para nenhum lugar.
      return false;
    }
  }
  box.style.display = 'none';

}

function fnFechar() {

  box = document.getElementById('bloco');
  box.style.display = 'none';

}
.modal_header {
  font-size: 24px;
  padding-top: 20px;
  padding-left: 0px;
  font-weight: bold;
  color: blue;
  margin: 0 0 20px;
  width: 250px;
  text-align: center;
  height: 40px;
}

.modal {
  width: 250px;
  height: 150px;
  background: #73ecf2;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  /* Metade da altura */
  margin-left: -125px;
  /* Metade da largura */
  z-index: 99999;
  border-radius: .3rem;
  text-align: center;
}

.fechar {
  position: absolute;
  width: 30px;
  right: -15px;
  top: -20px;
  text-align: center;
  line-height: 30px;
  margin-top: 5px;
  background: #ff4545;
  border-radius: 50%;
  font-size: 16px;
  color: #8d0000;
}
<div id="bloco" style="display: none;" class="modal">
  <a href="#" onClick="fnFechar();" title="Fechar" class="fechar">x</a>
  <div id="msg" class="modal_header"></div>


  <input type="hidden" id="paginaDestinoConfirmacaoEnvioY" value="">
  <input type="hidden" id="paginaDestinoConfirmacaoEnvioN" value="">
  <button class="btn btn-danger" type="button" onClick="fnConfirmaEEnvia(true)" data-dismiss="modal"><span id="ylegenda"></span></button>
  <br/><br/>
  <button class="btn btn-danger" type="button" onClick="fnConfirmaEEnvia(false)" data-dismiss="modal"><span id="nlegenda"></span></button>
</div>

<input type="button" name="Enviar" onclick="fnConfirma('Deseja iniciar o atendimento?','Sim, desejo iniciar o atendimento.', 'Desejo só consultar o cliente.','testemensagem.php?ENVIO1','testemensagem.php?ENVIO2')" value="Iniciar">

1
  • funcionou bem aqui, já fiz o modal com estilo, só coloca nas tags de style e de java script. Commented 16/09/2022 às 21:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .