window.confirm with custom buttons

Question

window.confirm with custom buttons

Navigation

#1 by (1 votes)

1

How do I get the onclick to return a window with the 3 options:

Yes
No
Cancel

I need to know how to handle the selected option as well.

The link will point to a PHP code that will handle the last ID , if the user chooses yes PHP after running it will point to a page , if the user says no, it will run the PHP and move to another page. If it cancels, then I just aborted the operation.

<a onclick="return confirm('exemplo de texto exibido')" href="pagina.php?id="1"></a>

javascript html front-end

asked by anonymous 13.03.2018 / 19:25

1 answer

Javascript - Quiz How to work with PrimeNG Editor?

score 1 · Answer 1

There is no native method ready for this, you can make your own or use some framework, I showed below two examples using framework.

Example with SweetAlert2 :

$(document).ready(function() {
  $("#teste").on("click", function(e) {
    var buttons = $('<div>')
    .append(createButton('Sim', function() {
       swal.close();
       console.log('Clicou no sim'); 
    })).append(createButton('Não', function() {
       swal.close();
       console.log('Clicou no não'); 
    })).append(createButton('Cancelar', function() {
       swal.close();
    }));
    
    e.preventDefault();
    swal({
      title: "Título",
      html: buttons,
      type: "warning",
      showConfirmButton: false,
      showCancelButton: false
    });
  });
});

function createButton(text, cb) {
  return $('<button>' + text + '</button>').on('click', cb);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.js"></script><buttonid="teste">
  Clique
</button>

Example with Jquery UI :

$(function() {
  $('#teste').click(function(e) {
      e.preventDefault();
      var janela = $('<p>Corpo da mensagem</p>').dialog({
         buttons: {
          "Sim": function() {
            console.log("Opção sim");
           },
           "Não":  function() {
            console.log("Opção não");
           },
           "Cancelar":  function() {
             janela.dialog('close');
           }
        }
      });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script><buttonid="teste">
Clique
</button>