window.confirm with custom buttons

Asked

Viewed 869 times

1

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

  • Yes

  • Not

  • Cancel

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

The link will direct to a code PHP that will treat the ID passed, if the user chooses the PHP after rotating will direct to a page, if the user says no, it will run the PHP and move on to another page. If he cancels, then just abort the operation.

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

  • The confirm of Javascript returns only true or false, I guess you’ll have to do another way

  • Make a script to open a bootstrap modal and also put a script for case if you click one of these options inside the modal. But I don’t know the whole situation, but it can be done this way.

  • 1

    With javascript you can not. Use an example framework/library: https://stackoverflow.com/questions/9091001/how-to-show-confirmation-alert-with-three-buttons-yes-no-and-cancel-as-it

  • then. Is there any other onclick that gives me that possibility?

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>
<link href="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>


<button id="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>

<link href="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>



<button id="teste">
Clique
</button>

Browser other questions tagged javascript html front-end

You are not signed in. Login or sign up in order to post.