¿Cómo implementar el diálogo de "confirmación" en el diálogo de la interfaz de usuario de Jquery?


148

Estoy tratando de usar JQuery UI Dialog para reemplazar el javascript:alert()cuadro feo . En mi caso, tengo una lista de elementos, y al lado de cada uno de ellos, tendría un botón "eliminar" para cada uno de ellos. la configuración html de psuedo será algo siguiente:

<ul>
    <li>ITEM <a href="url/to/remove"> <span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>

<div id="confirmDialog">Are you sure?</div>

En la parte JQ, en el documento listo, primero configuraría el div para que fuera un diálogo modal con el botón necesario, y configuraría esos "a" para que se activen antes de eliminarlos, como:

$("ul li a").click(function() {
  // Show the dialog    
  return false; // to prevent the browser actually following the links!
}

OK, aquí está el problema. durante el tiempo de inicio, el cuadro de diálogo no tendrá idea de quién (elemento) lo activará, y tampoco la identificación del elemento (!). ¿Cómo puedo configurar el comportamiento de esos botones de confirmación para que, si el usuario aún elige SÍ, siga el enlace para eliminarlo?


Hay un complemento fácil de usar para hacerlo aquí: stackoverflow.com/questions/6457750/form-confirm-before-submit

1
Looooong buscó solución: stackoverflow.com/a/18474005/1876355
Pierre

Respuestas:


166

Solo tenía que resolver el mismo problema. La clave para que esto funcione es que dialogdebe inicializarse parcialmente en elclick controlador de eventos para el enlace con el que desea usar la funcionalidad de confirmación (si desea usar esto para más de un enlace). Esto se debe a que la URL de destino para el enlace debe inyectarse en el controlador de eventos para hacer clic en el botón de confirmación. Usé una clase CSS para indicar qué enlaces deberían tener el comportamiento de confirmación.

Aquí está mi solución, abstraída para ser adecuada para un ejemplo.

<div id="dialog" title="Confirmation Required">
  Are you sure about this?
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true
    });
  });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
      buttons : {
        "Confirm" : function() {
          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });
</script>

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>

Creo que esto funcionaría para usted, si puede generar sus enlaces con la clase CSS ( confirmLinken mi ejemplo).

Aquí hay un jsfiddle con el código.

En aras de la divulgación completa, notaré que pasé unos minutos en este problema en particular y proporcioné una respuesta similar a esta pregunta , que tampoco tenía una respuesta aceptada en ese momento.


2
+1 casi funciona ... pero vea la respuesta de @lloydphillips para una corrección
rohancragg

¿Alguien más nota que esto causará un PostBack completo dentro de un UpdatePanel? ¿Cómo arreglas eso?
Homer

3
Hay algo sobre esta respuesta y las respuestas de @lloydphillips que simplemente no lo hacen por mí. La pregunta original se refiere a un botón "eliminar" (enlace). En general, no es aconsejable usar un enlace (HTTP GET) para una operación que cambia de estado (como DELETE). Ambas respuestas suponen que el usuario tiene habilitado JavaScript. Si javascript está deshabilitado, los enlaces se dispararán y la operación de eliminación (o cualquier otra) se disparará sin confirmación, lo que podría ser catastrófico. Esperaba encontrar una respuesta que abordara este problema.
echo

@echo: Pensé lo mismo. Para hacerlo correcto, creo que debe haber otra página que solicite confirmación si JS está desactivado. Si JS esta página podría omitirse. Tal vez a través de otro parámetro get como confirmado = verdadero. Realmente difícil y engorroso tener casos con y sin JS en cuenta. El desarrollo web es un desastre.
robsch

1
@sree Claro. Puede extraer una función que tomó el nombre de la identificación para usarla como parámetro e hizo las llamadas de jQuery para configurar los manejadores de eventos para la identificación pasada.
Paul Morie

59

Encontré que la respuesta de Paul no funcionó, ya que la forma en que estaba configurando las opciones DESPUÉS de que se instanciara el diálogo en el evento de clic era incorrecta. Aquí está mi código que estaba funcionando. No lo he adaptado para que coincida con el ejemplo de Paul, pero es solo la diferencia de un bigote de gato en términos de que algunos elementos se nombran de manera diferente. Deberías poder resolverlo. La corrección se encuentra en la configuración de la opción de diálogo para los botones en el evento de clic.

$(document).ready(function() {

    $("#dialog").dialog({
        modal: true,
        bgiframe: true,
        width: 500,
        height: 200,
        autoOpen: false
    });


    $(".lb").click(function(e) {

        e.preventDefault();
        var theHREF = $(this).attr("href");

        $("#dialog").dialog('option', 'buttons', {
            "Confirm" : function() {
                window.location.href = theHREF;
            },
            "Cancel" : function() {
                $(this).dialog("close");
            }
        });

        $("#dialog").dialog("open");

    });

});

Espero que esto ayude a alguien más, ya que esta publicación originalmente me llevó por el camino correcto. Pensé que sería mejor publicar la corrección.


1
No veo que lo que hiciste fue diferente a la respuesta de Paul.
Grant Birchmeier

2
Me parece bien. Lo único que sugeriría sería usar en onlugar de click, ya que esto continuará funcionando si (por ejemplo) el campo se vuelve a dibujar usando jQuery - api.jquery.com/on
Aaron Newton

1
ja "diferencia de bigotes de gato" - Necesito usar esa frase más.
Chad Gorshing

27

He creado una función propia para un cuadro de diálogo de confirmación de jquery ui. Aqui esta el codigo

function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
  $('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
    draggable: false,
    modal: true,
    resizable: false,
    width: 'auto',
    title: dialogTitle || 'Confirm',
    minHeight: 75,
    buttons: {
      OK: function () {
        if (typeof (okFunc) == 'function') {
          setTimeout(okFunc, 50);
        }
        $(this).dialog('destroy');
      },
      Cancel: function () {
        if (typeof (cancelFunc) == 'function') {
          setTimeout(cancelFunc, 50);
        }
        $(this).dialog('destroy');
      }
    }
  });
}

Ahora para usar esto en su código, simplemente escriba siguiente

myConfirm('Do you want to delete this record ?', function () {
    alert('You clicked OK');
  }, function () {
    alert('You clicked Cancel');
  },
  'Confirm Delete'
);

Seguir.


Esta es una buena solución, es muy similar a la mía que utilizo para la obtención de url de ajax y la visualización rápida ... función JQueryDialog (url) {$ ("# dialog"). Remove (); $ ("body"). append ("<div id = 'dialog' title = 'www.mysite.com'> </div>"); $ ("# dialog"). load (url) .dialog ({redimensionable: false, width: 770, height: 470, modal: true, botones: {"Close": function () {$ (this) .dialog ( "close"); $ ("# dialog"). remove ();}}}); }
conecta el

6

Solución simple y corta que acabo de probar y funciona

  $('.confirm').click(function() {
    $(this).removeClass('confirm');
    $(this).text("Sure?");
    $(this).unbind();
    return false;
  });

entonces simplemente agregue la clase = "confirmar" a su enlace y ¡funciona!


El mensaje de texto pregunta "¿Seguro?" pero no da una opción de sí / no, ok / cancelar. ¿Cómo indica el usuario si está "seguro" o "no está seguro"?
Genki

6

Esta es mi solución ... espero que ayude a cualquiera. Está escrito sobre la marcha en lugar de copiado, así que perdóname por cualquier error.

$("#btn").on("click", function(ev){
    ev.preventDefault();

    dialog.dialog("open");

    dialog.find(".btnConfirm").on("click", function(){
        // trigger click under different namespace so 
        // click handler will not be triggered but native
        // functionality is preserved
        $("#btn").trigger("click.confirmed");
    }
    dialog.find(".btnCancel").on("click", function(){
        dialog.dialog("close");
    }
});

Personalmente prefiero esta solución :)

editar: Lo siento ... realmente debería haberlo explicado con más detalle. Me gusta porque en mi opinión es una solución elegante. Cuando el usuario hace clic en el botón que debe confirmarse primero, el evento se cancela como debe ser. Cuando se hace clic en el botón de confirmación, la solución no es simular un clic en el enlace, sino activar el mismo evento jquery nativo (clic) sobre el botón original que se habría activado si no hubiera un diálogo de confirmación. La única diferencia es un espacio de nombres de eventos diferente (en este caso, 'confirmado') para que el cuadro de diálogo de confirmación no se vuelva a mostrar. El mecanismo nativo de Jquery puede hacerse cargo y las cosas pueden funcionar como se espera. Otra ventaja es que puede usarse para botones e hipervínculos. Espero haber sido lo suficientemente claro.


Considere editar su publicación y decirle a la comunidad por qué prefiere esta solución. ¿Qué lo hace mejor para ti?
Fuzzical Logic

Edité la publicación. Espero que tenga más sentido ahora. Cuando lo escribí parecía tan claro que no había necesidad de un comentario. Qué diferencia cuando lo
volví a

¡Una solución excelente y muy limpia! Nunca lea sobre espacios de nombres de eventos antes. ¡Gracias por eso!
griffla

BEAAUUTIFULLL! "... pero para activar el mismo evento jquery nativo (haga clic) en el botón original ..." ¡suena muy bien! Gracias por $("#btn").trigger("click.confirmed");
Irf

4

Sé que esta es una vieja pregunta, pero aquí está mi solución usando atributos de datos HTML5 en MVC4:

<div id="dialog" title="Confirmation Required" data-url="@Url.Action("UndoAllPendingChanges", "Home")">
  Are you sure about this?
</div>

Código JS:

$("#dialog").dialog({
    modal: true,              
    autoOpen: false,
    buttons: {
        "Confirm": function () {
            window.location.href = $(this).data('url');
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

$("#TheIdOfMyButton").click(function (e) {
    e.preventDefault();
    $("#dialog").dialog("open");
});

Me gusta esta solución, gracias. Fácil de entender y funciona para mí. No utilicé la parte @ Url.Action, pero funciona con una URL generada por mi MVC del lado del servidor (PHP / Symfony2).
Fazy

3

¿Con esto bastará?

$("ul li a").click(function(e) {
  e.preventDefault();
  $('#confirmDialog').show();

  var delete_path = $(this).attr('href');

  $('#confirmDialog a.ok').unbind('click'); //  just in case the cancel link 
                                            //  is not the  only way you can
                                            //  close your dialog
  $('#confirmDialog a.ok').click(function(e) {
     e.preventDefault();
     window.location.href = delete_path;
  });

});

$('#confirmDialog a.cancel').click(function(e) {
   e.preventDefault();
   $('#confirmDialog').hide();
   $('#confirmDialog a.ok').unbind('click');
});

Gracias por esta respuesta Estoy seguro de que lo probaré (y, sin embargo, parece funcional). Uno de los problemas que vi en muchas respuestas aquí es la falta de generalidad. Si la página tiene otro conjunto de controles (o enlaces, etc.) que necesitaban confirmación, parece que necesitamos una declaración múltiple sobre la interacción / acción. La antigua forma de javascript, es decir, href = "javascript: confirm ('link_url');" Es simple y elegante y se adapta a todos los casos similares. Por supuesto, el método de JavaScript es demasiado molesto para que las personas sin JavaScript pierdan por completo el enlace. Una vez más gracias por la gran respuesta.
xandy

3

Como anteriormente. Las publicaciones anteriores me llevaron por el buen camino. Así es como lo hice. La idea es tener una imagen al lado de cada fila de la tabla (generada por el script PHP de la base de datos). Cuando se hace clic en una imagen, el usuario será redirigido a la URL y, como resultado, el registro apropiado se eliminará de la base de datos mientras se muestran algunos datos relacionados con el registro en el que se hizo clic en el cuadro de diálogo jQuery UI.

El código de JavaScript:

$(document).ready(function () {
  $("#confirmDelete").dialog({
    modal: true,
    bgiframe: true,
    autoOpen: false
  });
});

function confirmDelete(username, id) {
  var delUrl = "/users/delete/" + id;
  $('#confirmDelete').html("Are you sure you want to delete user: '" + username + "'");
  $('#confirmDelete').dialog('option', 'buttons', {
    "No": function () {
      $(this).dialog("close");
    },
    "Yes": function () {
      window.location.href = delUrl;
    }
  });
  $('#confirmDelete').dialog('open');
}

Diálogo div:

<div id="confirmDelete" title="Delete User?"></div> 

Enlace de imágen:

<img src="img/delete.png" alt="Delete User" onclick="confirmDelete('<?=$username;?>','<?=$id;?>');"/>

De esta manera, puede pasar los valores del bucle PHP al cuadro de diálogo. El único inconveniente es utilizar el método GET para realizar la acción.


2

Qué tal esto:

$("ul li a").click(function() {

el = $(this);
$("#confirmDialog").dialog({ autoOpen: false, resizable:false,
                             draggable:true,
                             modal: true,
                             buttons: { "Ok": function() {
                                el.parent().remove();
                                $(this).dialog("close"); } }
                           });
$("#confirmDialog").dialog("open");

return false;
});

Lo he probado en este html:

<ul>
<li><a href="#">Hi 1</a></li>
<li><a href="#">Hi 2</a></li>
<li><a href="#">Hi 3</a></li>
<li><a href="#">Hi 4</a></li>
</ul>

Elimina todo el elemento li, puede adaptarlo a sus necesidades.


2

(A partir del 22/03/2016, la descarga en la página vinculada no funciona. Dejo el enlace aquí en caso de que el desarrollador lo corrija en algún momento porque es un pequeño complemento excelente. La publicación original sigue. alternativa, y un enlace que realmente funciona: jquery.confirm .)

Puede ser demasiado simple para sus necesidades, pero puede probar este complemento de confirmación jQuery . Es realmente simple de usar y hace el trabajo en muchos casos.


El enlace me lleva a un perfil vinculado. Parece que no puedes ver el complemento a menos que seas un miembro premium vinculado.
Zane

Actualicé el enlace para que funcione nuevamente. El desarrollador debe redirigir el enlace anterior a su perfil de LinkedIn. Si ella lo cambia de nuevo, solo búscalo en Google usando "jquery confirm plugin nadia".
grahamesd

¡Gracias! Si bien ya he implementado mi versión ahora, todavía voy a echar un vistazo.
Zane

el enlace está muerto nuevamente
Valamas

1

Por mucho que odio usar eval, me pareció la forma más fácil, sin causar muchos problemas dependiendo de las diferentes circunstancias. Similar a la función settimeout de javascript.

<a href="#" onclick="javascript:confirm('do_function(params)');">Confirm</a>
<div id="dialog-confirm" title="Confirm" style="display:none;">
    <p>Are you sure you want to do this?</p>
</div>
<script>
function confirm(callback){
    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: false,
        buttons: {
            "Ok": function() {
                $( this ).dialog( "close" );
                eval(callback)
            },
            Cancel: function() {
                $( this ).dialog( "close" );
                return false;
            }
        }
    });
}

function do_function(params){
    console.log('approved');
}
</script>

1

Me encontré con esto y terminé con una solución, que es similar a varias respuestas aquí, pero implementada de manera ligeramente diferente. No me gustaron muchas piezas de JavaScript, o un marcador de posición div en alguna parte. Quería una solución generalizada, que luego pudiera usarse en HTML sin agregar javascript para cada uso. Esto es lo que se me ocurrió (esto requiere jquery ui):

Javascript:

$(function() {

  $("a.confirm").button().click(function(e) {

    e.preventDefault();

    var target = $(this).attr("href");
    var content = $(this).attr("title");
    var title = $(this).attr("alt");

    $('<div>' + content + '</div>'). dialog({
      draggable: false,
      modal: true,
      resizable: false,
      width: 'auto',
      title: title,
      buttons: {
        "Confirm": function() {
          window.location.href = target;
        },
        "Cancel": function() {
          $(this).dialog("close");
        }
      }
    });

  });

});

Y luego, en HTML, no se necesitan llamadas ni referencias de JavaScript:

<a href="http://www.google.com/"
   class="confirm"
   alt="Confirm test"
   title="Are you sure?">Test</a>

Dado que el atributo de título se usa para el contenido div, el usuario puede incluso obtener la pregunta de confirmación al pasar el mouse sobre el botón (razón por la cual no utilicé el atributo de título para el mosaico). El título de la ventana de confirmación es el contenido de la etiqueta alt. El recorte de JavaScript se puede incluir en un archivo .js generalizado, y simplemente aplicando una clase tiene una bonita ventana de confirmación.


0
$("ul li a").live('click', function (e) {
            e.preventDefault();

            $('<div></div>').appendTo('body')
                    .html('<div><h6>Are you sure about this?</h6></div>')
                    .dialog({
                        modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
                        width: 'auto', modal: true, resizable: false,
                        buttons: {
                            Confirm: function () {
                                // $(obj).removeAttr('onclick');                                
                                // $(obj).parents('.Parent').remove();

                                $(this).dialog("close");

                                window.location.reload();
                            },
                            No: function () {
                                $(this).dialog("close");
                            }
                        },
                        Cancel: function (event, ui) {
                            $(this).remove();
                        }
                    });

            return false;
        });

0

NOTA: No hay suficiente representante para comentar, pero la respuesta de BineG funciona perfectamente en la resolución de problemas de devolución de datos con páginas ASPX como lo resaltan Homer y echo. En honor, aquí hay una variación usando un diálogo dinámico.

$('#submit-button').bind('click', function(ev) {
    var $btn = $(this);
    ev.preventDefault();
    $("<div />").html("Are you sure?").dialog({
        modal: true,
        title: "Confirmation",
        buttons: [{
            text: "Ok",
            click: function() {
                $btn.trigger("click.confirmed");
                $(this).dialog("close");
            }
        }, {
            text: "Cancel",
            click: function() {
                $(this).dialog("close");
            }
        }]
    }).show();  
});

0

Otra variación de lo anterior donde comprueba si el control es 'asp: linkbutton' o 'asp: button' que se representa como dos controles html diferentes. Parece funcionar bien para mí, pero no lo he probado exhaustivamente.

        $(document).on("click", ".confirm", function (e) {
            e.preventDefault();
            var btn = $(this);
            $("#dialog").dialog('option', 'buttons', {
                "Confirm": function () {
                    if (btn.is("input")) {                            
                        var name = btn.attr("name");
                        __doPostBack(name, '')
                    }
                    else {
                        var href = btn.attr("href");
                        window.location.href = href;
                    }
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            });

            $("#dialog").dialog("open");
        });

0

Estaba buscando esto para usar en los botones de enlace dentro de un ASP.NET Gridview (Comandos de compilación del control GridView) Por lo tanto, la acción "Confirmar" en el cuadro de diálogo debe activar un script generado por el control Gridview en tiempo de ejecución. esto funcionó para mí:

 $(".DeleteBtnClass").click(function (e) {
     e.preventDefault();
     var inlineFunction = $(this).attr("href") + ";";
     $("#dialog").dialog({
         buttons: {
             "Yes": function () {
                 eval(inlineFunction); // eval() can be harmful!
             },
                 "No": function () {
                 $(this).dialog("close");
             }
         }
     });
 });

eval () puede ser dañino! Por cierto, tengo que citar esta parte de su código: ¡ var inlineFunction = $(this).attr("href") + ";"; /* ... */ eval(inlineFunction);Esto no tiene ningún sentido!
Sk8erPeter

0

Sé que esta pregunta es antigua, pero esta fue la primera vez que tuve que usar un diálogo de confirmación. Creo que esta es la forma más corta de hacerlo.

$(element).onClick(function(){ // This can be a function or whatever, this is just a trigger
  var conBox = confirm("Are you sure ?");
    if(conBox){ 
        // Do what you have to do
    }
    else
        return;
});

Espero que te guste :)


0

Personalmente, veo esto como un requisito recurrente en muchas vistas de muchas aplicaciones ASP.Net MVC.

Es por eso que definí una clase de modelo y una vista parcial:

using Resources;

namespace YourNamespace.Models
{
  public class SyConfirmationDialogModel
  {
    public SyConfirmationDialogModel()
    {
      this.DialogId = "dlgconfirm";
      this.DialogTitle = Global.LblTitleConfirm;
      this.UrlAttribute = "href";
      this.ButtonConfirmText = Global.LblButtonConfirm;
      this.ButtonCancelText = Global.LblButtonCancel;
    }

    public string DialogId { get; set; }
    public string DialogTitle { get; set; }
    public string DialogMessage { get; set; }
    public string JQueryClickSelector { get; set; }
    public string UrlAttribute { get; set; }
    public string ButtonConfirmText { get; set; }
    public string ButtonCancelText { get; set; }
  }
}

Y mi punto de vista parcial:

@using YourNamespace.Models;

@model SyConfirmationDialogModel

<div id="@Model.DialogId" title="@Model.DialogTitle">
  @Model.DialogMessage
</div>

<script type="text/javascript">
  $(function() {
    $("#@Model.DialogId").dialog({
      autoOpen: false,
      modal: true
    });

    $("@Model.JQueryClickSelector").click(function (e) {
      e.preventDefault();
      var sTargetUrl = $(this).attr("@Model.UrlAttribute");

      $("#@Model.DialogId").dialog({
        buttons: {
          "@Model.ButtonConfirmText": function () {
            window.location.href = sTargetUrl;
          },  
          "@Model.ButtonCancelText": function () {
            $(this).dialog("close");
          }
        }
      });

      $("#@Model.DialogId").dialog("open");
    });
  });
</script>

Y luego, cada vez que lo necesite en una vista, simplemente use @ Html.Partial (en hitos de sección para que JQuery esté definido):

@Html.Partial("_ConfirmationDialog", new SyConfirmationDialogModel() { DialogMessage = Global.LblConfirmDelete, JQueryClickSelector ="a[class=SyLinkDelete]"})

El truco es especificar el JQueryClickSelector que coincidirá con los elementos que necesitan un diálogo de confirmación. En mi caso, todos los anclajes con la clase SyLinkDelete, pero podrían ser un identificador, una clase diferente, etc. Para mí fue una lista de:

<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params">
    <img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0">
</a>

ASP.Net MVC con jQuery.
Frederick Samson

0

Un tema muy popular y Google encuentra esto para la consulta "jquery dialog close what event you clicked". Mi solución maneja los eventos YES, NO, ESC_KEY, X correctamente. Quiero que se llame a mi función de devolución de llamada sin importar cómo se haya dispuesto el diálogo.

function dialog_YES_NO(sTitle, txt, fn) {
    $("#dialog-main").dialog({
        title: sTitle,
        resizable: true,
        //height:140,
        modal: true,
        open: function() { $(this).data("retval", false); $(this).text(txt); },
        close: function(evt) {
            var arg1 = $(this).data("retval")==true;
            setTimeout(function() { fn(arg1); }, 30);
        },
        buttons: {
            "Yes": function() { $(this).data("retval", true); $(this).dialog("close"); },
            "No": function()  { $(this).data("retval", false); $(this).dialog("close"); }
        }
    });
}
- - - - 
dialog_YES_NO("Confirm Delete", "Delete xyz item?", function(status) {
   alert("Dialog retval is " + status);
});

Es fácil redirigir el navegador a una nueva url o realizar otra cosa en la función retval.


0

Tantas buenas respuestas aquí;) Aquí está mi enfoque. Similar al uso de eval ().

function functionExecutor(functionName, args){
    functionName.apply(this, args);
}

function showConfirmationDialog(html, functionYes, fYesArgs){
    $('#dialog').html(html);
    $('#dialog').dialog({
        buttons : [
            {
                text:'YES',
                click: function(){
                    functionExecutor(functionYes, fYesArgs);
                    $(this).dialog("close");
                },
                class:'green'
            },
            {
                text:'CANCEL',
                click: function() {
                    $(this).dialog("close");
                },
                class:'red'
            }
        ]
    });     
}

Y el uso se ve así:

function myTestYesFunction(arg1, arg2){
    alert("You clicked YES:"+arg1+arg2);
}

function toDoOrNotToDo(){
    showConfirmationDialog("Dialog text", myTestYesFunction, ['My arg 1','My arg 2']);
}

0

Fuera de la caja, JQuery UI ofrece esta solución:

$( function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );

HTML

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
 </span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

Puede personalizar aún más esto proporcionando un nombre para la función JQuery y pasando el texto / título que desea que se muestre como parámetro.

Referencia: https://jqueryui.com/dialog/#modal-confirmation


-1

Bueno, esta es la respuesta a tus preguntas ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>Santa Luisa</TITLE>
<style>
    body{margin:0;padding:0;background-color:#ffffff;}
    a:link {color:black;}    
a:visited {color:black;}  
a:hover {color:red;}  
a:active {color:red;}
</style>

</HEAD>
<body>

<link rel="stylesheet" href="jquery/themes/base/jquery.ui.all.css">
    <script src="jquery-1.4.4.js"></script>

    <script src="external/jquery.bgiframe-2.1.2.js"></script>
    <script src="ui/jquery.ui.core.js"></script>

    <script src="ui/jquery.ui.widget.js"></script>
    <script src="ui/jquery.ui.mouse.js"></script>
    <script src="ui/jquery.ui.draggable.js"></script>
    <script src="ui/jquery.ui.position.js"></script>

    <script src="ui/jquery.ui.resizable.js"></script>
    <script src="ui/jquery.ui.dialog.js"></script>

    <link rel="stylesheet" href="demos.css">
    <script>
    var lastdel;
    $(function() {
        $( "#dialog" ).dialog({
            autoOpen: false,modal: true,closeOnEscape: true
        });

        $(".confirmLink").click(function(e) {
            e.preventDefault();
            var lastdel = $(this).attr("href");

        });


        $("#si").click( function() {
            $('#dialog').dialog('close');
            window.location.href =lastdel;

        });
        $("#no").click( function() {
            $('#dialog').dialog('close');
        });
    });

    </script>

<SCRIPT LANGUAGE="JavaScript">
<!--
        var currentimgx;
        var cimgoverx=200-6;
        var cimgoutx=200;


        function overbx(obj){
        color='#FF0000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';


        currentimgx.style.width=cimgoverx+"px";
        currentimgx.style.height=cimgoverx+"px"; 

    }

    function outbx(obj){
        obj.style.borderTopWidth = '0px';   
        obj.style.borderLeftWidth = '0px';
        obj.style.borderRightWidth = '0px';
        obj.style.borderBottomWidth = '0px';

        currentimgx.style.width=cimgoutx+"px";
        currentimgx.style.height=cimgoutx+"px"; 
    }

function ifocusx(obj){
        color='#FF0000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';

    }

    function iblurx(obj){
        color='#000000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';
    }

    function cimgx(obj){
        currentimgx=obj;
    }


    function pause(millis){
    var date = new Date();
    var curDate = null;

    do { curDate = new Date(); }
    while(curDate-date < millis);
    } 


//-->
</SCRIPT>
<div id="dialog" title="CONFERMA L`AZIONE" style="text-align:center;">
    <p><FONT  COLOR="#000000" style="font-family:Arial;font-size:22px;font-style:bold;COLOR:red;">CONFERMA L`AZIONE:<BR>POSSO CANCELLARE<BR>QUESTA RIGA ?</FONT></p>

    <p><INPUT TYPE="submit" VALUE="SI" NAME="" id="si"> --><INPUT TYPE="submit" VALUE="NO" NAME="" id="no"></p>
</div>



<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="100%" height="100%">
<TR valign="top" align="center">
    <TD>
    <FONT COLOR="red" style="font-family:Arial;font-size:25px;font-style:bold;color:red;">Modifica/Dettagli:<font style="font-family:Arial;font-size:20px;font-style:bold;background-color:yellow;color:red;">&nbsp;298&nbsp;</font><font style="font-family:Arial;font-size:20px;font-style:bold;background-color:red;color:yellow;">dsadas&nbsp;sadsadas&nbsp;</font>&nbsp;</FONT>
    </TD>
</TR>

<tr valign="top">
    <td align="center">
        <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">
        <TR align="left">

            <TD>
                <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">

                <TR align="left">
                    <TD>
                    <font style="font-sixe:30px;"><span style="color:red;">1</span></font><br><TABLE class="tabela" CELLSPACING="0" CELLPADDING="0" BORDER="1" WIDTH="800px"><TR style="color:white;background-color:black;"><TD align="center">DATA</TD><TD align="center">CODICE</TD><TD align="center">NOME/NOMI</TD><TD  align="center">TESTO</TD><td>&nbsp;</td><td>&nbsp;</td></TR><TR align="center"><TD>12/22/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=1';alert(lastdel);" class="confirmLink">Cancella</A></TD><TR align="center"><TD>22/10/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>dfdsfsdfsf</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=2';alert(lastdel);" class="confirmLink">Cancella</A></TD></TABLE><font style="font-sixe:30px;"><span style="color:red;">1</span></font><br>

                    </TD>
                </TR>

                </TABLE>
            </TD>
        </TR>
        </TABLE>
    </td>
</tr>
</tbody></table>


</body>
</html>

asegúrese de tener jquery 1.4.4 y jquery.ui


Este es uno de los códigos más feos que he visto en años. Utiliza atributos obsoletos (como LANGUAGE="JavaScript"), usa mayúsculas y minúsculas mezcladas, combina códigos JS simples con códigos jQuery de forma totalmente innecesaria y establece estilos con JS en lugar de CSS (feo y semánticamente incorrecto) y, por cierto, su estilo modificación (con JS simple) es absolutamente irrelevante con respecto a la pregunta original. Definitivamente debe acortar y embellecer su código y centrarse en responder la pregunta original.
Sk8erPeter

-1

Manera fácil con un toque de javascript

$("#myButton").click(function(event) {
    var cont = confirm('Continue?');
    if(cont) {
        // do stuff here if OK was clicked
        return true;
    }
    // If cancel was clicked button execution will be halted.
    event.preventDefault();
}

2
El punto era específicamente evitar usar las funciones predeterminadas de alerta / confirmación de javascript, etc., por lo que esta no es una solución a la pregunta.
redreinard
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.