¿Cómo crear un diálogo con las opciones "sí" y "no"?


658

Voy a hacer un botón para realizar una acción y guardar los datos en una base de datos.

Una vez que el usuario hace clic en el botón, quiero una alerta de JavaScript para ofrecer opciones de "sí" y "cancelar". Si el usuario selecciona "sí", los datos se insertarán en la base de datos, de lo contrario no se tomarán medidas.

¿Cómo visualizo tal diálogo?


2
@Szenis Bastante muerto, estilo simple y agradable sí / no. También odio los diálogos XUL porque congela muchas cosas. Muchas gracias.
m3nda

Respuestas:


1248

Probablemente esté buscando confirm(), que muestra un mensaje y devuelve trueo en falsefunción de lo que decidió el usuario:

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.');
}


125
confirmar tiene OK y CANCELAR botones. ¿Se pueden configurar estos botones en SÍ / NO?
Owen

16
@Owen No. La especificación dice que solo puedes enviar un mensaje. Puede emular un diálogo en HTML (aunque no se bloqueará como el incorporado). jQuery Dialog es un buen ejemplo de implementación de este tipo de cosas.
s4y

3
nota: puede poner un returndentro de lo demás y luego no necesita envolver todo su código en la confirmación. (Sin embargo, caso por caso)
Jacob Raccuia

21
@JacobRaccuia O simplementeif(!confirm('message')) return;
Aaron

1
@Dimple no hay forma de personalizarlo, actualmente. Es por eso que algunos sitios web usan cuadros de diálogo personalizados en la página en lugar de los nativos.
s4y

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

Usar en window.confirmlugar de alerta. Esta es la forma más fácil de lograr esa funcionalidad.


15
También puede ir a if(confirm("...")){su lugar
Nicolas Bouliane

75

Cómo hacer esto usando JavaScript 'en línea':

<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>

55
Es mejor manejar el evento de envío del formulario: con su código, si el usuario presiona enter en el texto, ¡el formulario se envía sin ninguna solicitud!
p91paul

1
@ p91paul - ¿Qué navegador le falla esto? Acabo de intentar presionar enter en IE, Chrome y Safari en Windows y funcionó como se esperaba. jsfiddle.net/ALjge/1
dana

bueno, estaba seguro de lo que estaba diciendo, pero no lo he probado y me equivoqué. ¡lo siento!
p91paul

1
No hay problema :) Por lo general, hay más de una forma de pelar un gato. Solo quería confirmar que mi enfoque estaba funcionando. Usar el <form onsubmit="...">como sugeriste también funciona :)
dana

41

Evite JavaScript en línea : cambiar el comportamiento significaría editar cada instancia del código, ¡y no es bonito!

Una forma mucho más limpia es usar un atributo de datos en el elemento, como data-confirm="Your message here". Mi código a continuación admite las siguientes acciones, incluidos los elementos generados dinámicamente:

  • ay buttonclics
  • form envía
  • option selecciona

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>

Demostración JSFiddle


2
Solución muy limpia que no había pensado antes. Sin embargo, puede ser aún más conciso:$("[data-confirm]").on('click,submit', function() { /* ... */ })
Mueca de desesperación

Lo siento, no pude resistir echarle un vistazo nuevamente. Primero: los eventos deben estar separados por un espacio. Segundo: aún puede ajustar el código jsfiddle.net/jguEg ;)
Mueca de desesperación

@GrimaceofDespair He actualizado el código, porque al hacer clic y confirmar, type="button"luego le pregunté si el usuario quería enviar el formulario (porque está haciendo clic en un elemento del formulario), lo que obviamente no sucedió después de hacer clic nuevamente en Aceptar.
rybo111

Estos son buenos ejemplos, aunque todos usan el diálogo de confirmación (), por lo que no puede cambiar el nombre de los botones Cancelar / Aceptar: |
rogerdpack

@rogerdpack Sí, pero la belleza de usar atributos de datos es que puedes cambiar confirm()a lo que quieras sin cambiar el HTML.
rybo111

22

Debe crear custome confirmBox , no es posible cambiar los botones en el cuadro de diálogo que muestra la función de confirmación.

Jquery confirmBox


ver este ejemplo: 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();
}

Llámalo por tu código:

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

** Confirmar JavaScript puro **


Ejemplo : 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>

Guión :

<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;
}


2
Muy agradable también ... bastante simple, javascript puro y no tanto CSS. Me gusta: D
m3nda

Confirme que los cuadros deben desaparecer una vez que se presiona un elemento. Además, debe usar clases, no identificadores.
rybo111

@rogerdpack Actualicé el violín, avíseme si necesita algo de mi parte :)
Keval Bhatt

@rogerdpack si le gusta la respuesta, entonces puede votar: P
Keval Bhatt

@KevalBhatt, me gusta tu versión 'JS puro'. ¿Hay alguna forma de eliminar / ocultar / lo que sea diálogo justo después de presionar un botón? Si pongo document.getElementById('id_confrmdiv').style.display="none";el diálogo está oculto después de todos los comandos ejecutados en el método para un botón.
Andrii Muzychuk

13

Este complemento puede ayudarlo a jquery-confirm fácil de usar

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

8

O simplemente:

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

1
¡Gracias! Tenía miedo de tener que incluir jQuery en mi aplicación CRUD simple solo para hacer esto simple, estás seguro de que quieres eliminar esto.
Will Matheson

7

Puede interceptar el onSubmitevento en JS. Luego llame a una alerta de confirmación y luego tome el resultado.


5

Otra forma de hacer esto:

$("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


   });

5

Esta es una solución de respuesta completa que utiliza JavaScript de vainilla

// 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>


3

xdialog proporciona una API simple xdialog.confirm () . El fragmento de código está siguiendo. Más demos se pueden encontrar aquí

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>


Tienes que describir a qué te refieres // do work here... ¿Las funciones para YES TEXTy NO TEXTvan allí?
kev

1
@kev, la devolución de llamada se ejecutará cuando el usuario seleccione el botón Aceptar.
xia xiongjun

¿Y a dónde va la lógica NO TEXT?
kev

Puede agregar una oncancelopción a las últimas opciones de parámetro de xdialog.confirm(text, onyes, options). Para obtener más detalles, consulte: xdialog default-options
xia xiongjun

-2
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';       
   }
});

Lo siento español?
zixuan
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.