Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

278
Vistas
Cómo crear un cuadro de diálogo con las opciones "Aceptar" y "Cancelar"

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 realizará ninguna acción.

¿Cómo puedo mostrar un cuadro de diálogo de este tipo?

over 4 years ago · Santiago Trujillo
7 Respuestas
Responde la pregunta

0

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:

  • a y clics de button
  • 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 de JSFiddle

over 4 years ago · Santiago Trujillo Denunciar

0

Tienes que crear un confirmBox personalizado. No es posible cambiar los botones en el cuadro de diálogo que muestra la función de confirmación.

jQuery confirmBox


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

JavaScript puro confirmBox


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>

Texto

 <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; }
over 4 years ago · Santiago Trujillo Denunciar

0

Puede interceptar el evento onSubmit usando JavaScript.

Luego llame a una alerta de confirmación y luego tome el resultado.

over 4 years ago · Santiago Trujillo Denunciar

0

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

Utilice window.confirm en lugar de alert. Esta es la forma más fácil de lograr esa funcionalidad.

over 4 years ago · Santiago Trujillo Denunciar

0

Probablemente esté buscando confirm() , que muestra un aviso y devuelve true o false según lo que el usuario decida:

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

over 4 years ago · Santiago Trujillo Denunciar

0

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>
over 4 years ago · Santiago Trujillo Denunciar

0

O simplemente:

 <a href="https://some-link.com/" onclick="return confirm('Are you sure you want to go to that link?');">click me!</a>
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda