Como criar um diálogo com as opções "sim" e "não"?

Vou criar um botão para executar uma ação e salvar os dados em um banco de dados.

Depois que o usuário clicar no botão, desejo que um alerta JavaScript ofereça as opções "yes" e "cancel". Se o usuário selecionar "sim", os dados serão inseridos no banco de dados, caso contrário, nenhuma ação será tomada.

Como faço para exibir esse diálogo?

Você provavelmente está procurando confirm(), que exibe um prompt e retorna trueou com falsebase no que o usuário decidiu:

if (confirm('Are you sure you want to save this thing into the database?')) {
  // Save it!
  console.log('Thing was saved to the database.');
} else {
  // Do nothing!
  console.log('Thing was not saved to the database.');
}

var answer = window.confirm("Save data?")
if (answer) {
    //some code
}
else {
    //some code
}

Use em window.confirmvez de alerta. Essa é a maneira mais fácil de obter essa funcionalidade.

Como fazer isso usando o JavaScript 'inline':

<form action="http://www.google.com/search">
  <input type="text" name="q" />
  <input type="submit" value="Go"
    onclick="return confirm('Are you sure you want to search Google?')"
  />
</form>

Evitar JavaScript embutido - alterar o comportamento significaria editar todas as instâncias do código, e isso não é bonito!

Uma maneira muito mais limpa é usar um atributo de dados no elemento, como data-confirm="Your message here". Meu código abaixo suporta as seguintes ações, incluindo elementos gerados dinamicamente:

• ae buttoncliques
• form envia
• option Selecione% s

jQuery:

$(document).on('click', ':not(form)[data-confirm]', function(e){
    if(!confirm($(this).data('confirm'))){
        e.stopImmediatePropagation();
        e.preventDefault();
    }
});

$(document).on('submit', 'form[data-confirm]', function(e){
    if(!confirm($(this).data('confirm'))){
        e.stopImmediatePropagation();
        e.preventDefault();
    }
});

$(document).on('input', 'select', function(e){
    var msg = $(this).children('option:selected').data('confirm');
    if(msg != undefined && !confirm(msg)){
        $(this)[0].selectedIndex = 0;
    }
});

HTML:

<!-- hyperlink example -->
<a href="http://www.example.com" data-confirm="Are you sure you want to load this URL?">Anchor</a>

<!-- button example -->
<button type="button" data-confirm="Are you sure you want to click the button?">Button</button>

<!-- form example -->
<form action="http://www.example.com" data-confirm="Are you sure you want to submit the form?">
    <button type="submit">Submit</button>
</form>

<!-- select option example -->
<select>
    <option>Select an option:</option>
    <option data-confirm="Are you want to select this option?">Here</option>
</select>

Demonstração do JSFiddle

Você deve criar custume confirmBox , não é possível alterar os botões na caixa de diálogo exibida pela função de confirmação.

Jquery confirmBox

veja este exemplo: https://jsfiddle.net/kevalbhatt18/6uauqLn6/

<div id="confirmBox">
    <div class="message"></div>
    <span class="yes">Yes</span>
    <span class="no">No</span>
</div>

function doConfirm(msg, yesFn, noFn)
{
    var confirmBox = $("#confirmBox");
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no").unbind().click(function()
    {
        confirmBox.hide();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.show();
}

Chame pelo seu código:

doConfirm("Are you sure?", function yes()
{
    form.submit();
}, function no()
{
    // do nothing
});

** Confirmação de JavaScript puro **

Exemplo : http://jsfiddle.net/kevalbhatt18/qwkzw3rg/127/

<div id="id_confrmdiv">confirmation
    <button id="id_truebtn">Yes</button>
    <button id="id_falsebtn">No</button>
</div>

<button onclick="doSomething()">submit</button>

Roteiro :

<script>

function doSomething(){
document.getElementById('id_confrmdiv').style.display="block"; //this is the replace of this line


document.getElementById('id_truebtn').onclick = function(){
   //do your delete operation
    alert('true');
};

document.getElementById('id_falsebtn').onclick = function(){
     alert('false');
   return false;
};
}
</script>

CSS :

body { font-family: sans-serif; }
#id_confrmdiv
{
    display: none;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #aaa;
    position: fixed;
    width: 300px;
    left: 50%;
    margin-left: -150px;
    padding: 6px 8px 8px;
    box-sizing: border-box;
    text-align: center;
}
#id_confrmdiv button {
    background-color: #ccc;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #aaa;
    padding: 2px;
    text-align: center;
    width: 80px;
    cursor: pointer;
}
#id_confrmdiv .button:hover
{
    background-color: #ddd;
}
#confirmBox .message
{
    text-align: left;
    margin-bottom: 8px;
}

Este plugin pode ajudá-lo a confirmar com jquery, fácil de usar

$.confirm({
    title: 'Confirm!',
    content: 'Simple confirm!',
    confirm: function(){
        alert('Confirmed!');
    },
    cancel: function(){
        alert('Canceled!')
    }
});

Ou simplesmente:

<a href="https://some-link.com/" onclick="return confirm('Are you sure you want to go to that link?');">click me!</a>

Você pode interceptar o onSubmitevento com JS. Em seguida, chame um alerta de confirmação e pegue o resultado.

Outra maneira de fazer isso:

$("input[name='savedata']").click(function(e){
       var r = confirm("Are you sure you want to save now?");

       //cancel clicked : stop button default action 
       if (r === false) {
           return false;
        }

        //action continues, saves in database, no need for more code


   });

Esta é uma solução responsiva completa usando javascript de baunilha:

// Call function when show dialog btn is clicked
document.getElementById("btn-show-dialog").onclick = function(){show_dialog()};
var overlayme = document.getElementById("dialog-container");

function show_dialog() {
 /* A function to show the dialog window */
    overlayme.style.display = "block";
}

// If confirm btn is clicked , the function confim() is executed
document.getElementById("confirm").onclick = function(){confirm()};
function confirm() {
 /* code executed if confirm is clicked */   
    overlayme.style.display = "none";
}

// If cancel btn is clicked , the function cancel() is executed
document.getElementById("cancel").onclick = function(){cancel()};
function cancel() {
 /* code executed if cancel is clicked */  
    overlayme.style.display = "none";
}

.popup {
  width: 80%;
  padding: 15px;
  left: 0;
  margin-left: 5%;
  border: 1px solid rgb(1,82,73);
  border-radius: 10px;
  color: rgb(1,82,73);
  background: white;
  position: absolute;
  top: 15%;
  box-shadow: 5px 5px 5px #000;
  z-index: 10001;
  font-weight: 700;
  text-align: center;
}

.overlay {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.85);
  z-index: 10000;
  display :none;
}

@media (min-width: 768px) {
  .popup {
    width: 66.66666666%;
    margin-left: 16.666666%;
  }
}
@media (min-width: 992px) {
  .popup {
    width: 80%;
    margin-left: 25%;
  }
}
@media (min-width: 1200px) {
  .popup {
    width: 33.33333%;
    margin-left: 33.33333%;
  }
}

.dialog-btn {
  background-color:#44B78B;
  color: white;
  font-weight: 700;
  border: 1px solid #44B78B;
  border-radius: 10px;
  height: 30px;
  width: 30%;
}
.dialog-btn:hover {
  background-color:#015249;
  cursor: pointer;
}

<div id="content_1" class="content_dialog">
    <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
    <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti.</p>
</div>

<button id="btn-show-dialog">Ok</button>


<div class="overlay" id="dialog-container">
  <div class="popup">
    <p>This will be saved. Continue ?</p>
    <div class="text-right">
      <button class="dialog-btn btn-cancel" id="cancel">Cancel</button>
      <button class="dialog-btn btn-primary" id="confirm">Ok</button>
    </div>
  </div>
</div>

O xdialog fornece uma API simples xdialog.confirm () . O snippet de código está a seguir. Mais demos podem ser encontradas aqui

document.getElementById('test').addEventListener('click', test);

function test() {
  xdialog.confirm('Are you sure?', function() {
    // do work here if ok/yes selected...
    console.info('Done!');
  }, {
    style: 'width:420px;font-size:0.8rem;',
    buttons: {
      ok: 'yes text',
      cancel: 'no text'
    },
    oncancel: function() {
      console.warn('Cancelled!');
    }
  });
}

<link href="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.js"></script>
<button id="test">test</button>

document.getElementById("button").addEventListener("click", function(e) {
   var cevap = window.confirm("Satın almak istediğinizden emin misiniz?");
   if (cevap) {
     location.href='Http://www.evdenevenakliyat.net.tr';       
   }
});