Como implementar a caixa de diálogo "confirmação" na caixa de diálogo Jquery UI?

148

Estou tentando usar o JQuery UI Dialog para substituir a javascript:alert()caixa feia . No meu cenário, tenho uma lista de itens e, ao lado de cada um deles, teria um botão "excluir" para cada um deles. a instalação do psuedo html será a seguinte:

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

Na parte JQ, no documento pronto, eu primeiro configurava o div para ser uma caixa de diálogo modal com o botão necessário e definia os "a" para serem disparados para confirmação antes da remoção, como:

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

OK, aqui está o problema. durante o tempo de inicialização, a caixa de diálogo não faz ideia de quem (item) irá acioná-lo, e também a identificação do item (!). Como posso configurar o comportamento desses botões de confirmação para, se o usuário ainda escolher SIM, seguirá o link para removê-lo?

xandy
fonte
Há um plugin fácil de usar para fazer isso aqui: stackoverflow.com/questions/6457750/form-confirm-before-submit
1
Looooong procurou solução: stackoverflow.com/a/18474005/1876355
Pierre

Respostas:

166

Eu apenas tive que resolver o mesmo problema. A chave para fazer isso funcionar foi que ele dialogdeve ser parcialmente inicializado no clickmanipulador de eventos para o link com o qual você deseja usar a funcionalidade de confirmação (se desejar usá-lo para mais de um link). Isso ocorre porque o URL de destino do link deve ser injetado no manipulador de eventos para o clique no botão de confirmação. Eu usei uma classe CSS para indicar quais links devem ter o comportamento de confirmação.

Aqui está a minha solução, abstraída para ser adequada para um exemplo.

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

Acredito que isso funcionaria para você, se você pode gerar seus links com a classe CSS ( confirmLink, no meu exemplo).

Aqui está um jsfiddle com o código nele.

No interesse da divulgação completa, observarei que passei alguns minutos nesse problema específico e forneci uma resposta semelhante a essa pergunta , que também não tinha uma resposta aceita na época.

Paul Morie
fonte
2
+1 quase funciona ... mas ver resposta de @lloydphillips para uma correção
rohancragg
Alguém mais notou que isso causaria um PostBack completo dentro de um UpdatePanel? como você conserta aquilo?
Homer
3
Há algo sobre esta resposta e as respostas de @lloydphillips que simplesmente não fazem isso por mim. A pergunta original refere-se a um botão "excluir" (link). Em geral, é desaconselhável usar um link (HTTP GET) para uma operação que altera o estado (como um DELETE). Ambas as respostas pressupõem que o usuário tenha o javascript ativado. Se o javascript estiver desativado, os links serão acionados e a operação de exclusão (ou qualquer outra coisa) será acionada sem confirmação, o que pode ser catastrófico. Eu esperava encontrar uma resposta que resolvesse esse problema.
echo
@echo: Eu pensei sobre o mesmo. Para torná-lo adequado, acho que deve haver outra página que solicite confirmação se o JS estiver desativado. Se JS, esta página poderia ser omitida. Talvez através de outro parâmetro get, como confirm = true. Realmente difícil e complicado levar em consideração casos com e sem JS. Desenvolvimento Web é uma bagunça.
robsch
1
@sree Claro. Você pode extrair uma função que tomou o nome do ID a ser usado como parâmetro e fez as chamadas do jQuery para configurar os manipuladores de eventos para o ID passado.
Paul Morie
59

Descobri que a resposta de Paul não funcionou porque a maneira como ele definia as opções APÓS a caixa de diálogo foi instanciada no evento click estava incorreta. Aqui está o meu código que estava funcionando. Eu não o adaptei para combinar com o exemplo de Paul, mas é apenas a diferença de bigode de gato em termos de alguns elementos que têm nomes diferentes. Você deve conseguir resolver isso. A correção está no configurador da opção de diálogo para os botões no evento de clique.

$(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 isso ajude outra pessoa, pois este post me colocou no caminho certo, achei melhor postar a correção.

Lloydphillips
fonte
1
Não estou vendo o que você fez diferente da resposta de Paulo.
Grant Birchmeier
2
Parece bom para mim. A única coisa que eu gostaria Sugerir seria usar onem vez de click, como isso vai continuar a trabalhar se (por exemplo) o campo é redesenhada usando jQuery - api.jquery.com/on
Aaron Newton
1
hah "a diferença do bigode do gato" - preciso usar mais essa frase.
Chad Gorshing
27

Eu criei uma função própria para uma caixa de diálogo de confirmação da interface do usuário do jquery. Aqui está o código

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

Agora, para usar isso em seu código, basta escrever o seguinte

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

Continue.

codificador-d
fonte
Essa é uma boa solução, é muito semelhante à minha que eu uso para obter url ajax e exibição rápida ... function JQueryDialog (url) {$ ("# dialog"). Remove (); $ ("body"). append ("<div id = 'dialog' title = 'www.meusite.com'> </div>"); $ ("# dialog"). load (url) .dialog ({redimensionável: false, largura: 770, altura: 470, modal: true, botões: {"Close": function () {$ (this) .dialog ( "fechar"); $ ("# dialog"). remove ();}}}); }
conners 17/10/12
6

Solução simples e curta que eu apenas tentei e funciona

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

basta adicionar a classe = "confirmar" ao seu link e ele funciona!

user681365
fonte
A mensagem .text pergunta "Tem certeza?" mas não permite sim / não, ok / cancelar. Como o usuário indica se tem "certeza" ou "não tem certeza"?
Genki 24/08
6

Esta é a minha solução .. espero que ajude alguém. Está escrito em tempo real, em vez de copypasted, então me perdoe por qualquer erro.

$("#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");
    }
});

Pessoalmente, eu prefiro esta solução :)

edit: Desculpe .. eu realmente deveria ter explicado mais detalhadamente. Gosto porque, na minha opinião, é uma solução elegante. Quando o usuário clica no botão que precisa ser confirmado primeiro, o evento é cancelado como deve ser. Quando o botão de confirmação é clicado, a solução não é simular um clique no link, mas acionar o mesmo evento jquery nativo (clique) no botão original que seria acionado se não houvesse um diálogo de confirmação. A única diferença é um namespace de evento diferente (neste caso 'confirmado'), para que o diálogo de confirmação não seja mostrado novamente. O mecanismo nativo do Jquery pode assumir o controle e tudo pode ser executado conforme o esperado. Outra vantagem é que ele pode ser usado para botões e hiperlinks. Espero ter sido claro o suficiente.

BineG
fonte
Considere editar sua postagem e diga à comunidade por que você prefere esta solução. O que o torna melhor para você?
Fuzzical Logic
Eu editei a postagem. Espero que faça mais sentido agora. Quando escrevi, parecia tão claro que não havia necessidade de comentar. Que diferença quando eu revisitado depois de um tempo ... :)
BineG
Uma ótima solução muito limpa! Nunca leia sobre espaços para nome de eventos antes. Obrigado por isso!
Griffla
BEAAUUTIFULLL! "..mas para acionar o mesmo evento nativo de jquery (clique) no botão original .." soa lindo !! Obrigado por $("#btn").trigger("click.confirmed");
Irf 21/03
4

Sei que essa é uma pergunta antiga, mas aqui está minha solução usando atributos de dados HTML5 no 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");
});
óculos de sol
fonte
Eu gosto desta solução, obrigado. Fácil de entender e funciona para mim. Não usei a parte @ Url.Action, mas funciona com uma URL gerada pelo meu MVC do lado do servidor (PHP / Symfony2).
Fazy
3

Isso vai dar?

$("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');
});
e eu
fonte
Obrigado por esta resposta. Tenho certeza de que vou testá-lo (e ainda assim parece funcional). Um dos problemas que vi de muitas respostas aqui é a falta de generalidade. Se a página tiver outro conjunto de controles (ou links) que necessitem de confirmação, parece que precisamos de várias declarações sobre a interação / ação. A maneira antiga de javascript, ou seja, href = "javascript: confirm ('link_url');" é simples e elegante e serve para todos os casos semelhantes. Obviamente, o método javascript é muito obstrutivo para que as pessoas que não possuem javascript perdam completamente o link. Mais uma vez obrigado pela ótima resposta.
Xandy 20/05/09
3

Como acima. Postagens anteriores me colocaram no caminho certo. Foi assim que eu fiz. A idéia é ter uma imagem ao lado de cada linha da tabela (gerada pelo script PHP a partir do banco de dados). Quando uma imagem é clicada, o usuário é redirecionado para a URL e, como resultado, o registro apropriado é excluído do banco de dados enquanto mostra alguns dados relacionados ao registro clicado no Diálogo da UI do jQuery.

O código 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> 

Link da imagem:

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

Dessa forma, você pode passar os valores do loop do PHP para a caixa de diálogo. A única desvantagem é usar o método GET para realmente executar a ação.

LukeP
fonte
2

Que tal agora:

$("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;
});

Eu testei neste 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>

Ele remove todo o elemento li, você pode adaptá-lo às suas necessidades.

kgiannakakis
fonte
2

(A partir de 22/03/2016, o download na página vinculada não funciona. Estou deixando o link aqui, caso o desenvolvedor o corrija em algum momento porque é um ótimo pequeno plugin. A postagem original segue. alternativa e um link que realmente funciona: jquery.confirm .)

Pode ser muito simples para suas necessidades, mas você pode tentar este plugin de confirmação do jQuery . É realmente simples de usar e faz o trabalho em muitos casos.

Grahamesd
fonte
O link me leva a um perfil vinculado. Parece que você não pode ver o plugin, a menos que você seja um membro vinculado premium.
Zane
Eu atualizei o link para que funcione novamente. O desenvolvedor deve estar redirecionando o link antigo para o perfil do LinkedIn. Se ela mudar novamente, basta pesquisar no Google usando "jquery confirm plugin nadia".
grahamesd
Obrigado! Embora já tenha implementado minha versão agora, ainda darei uma olhada.
Zane
o link está morto novamente
Valamas
1

Por mais que eu odeie usar eval, parecia a maneira mais fácil para mim, sem causar muitos problemas, dependendo de circunstâncias diferentes. Semelhante à função settimeout do 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>
SethT
fonte
1

Eu me deparei com isso e acabei com uma solução, que é semelhante a várias respostas aqui, mas implementada de maneira um pouco diferente. Eu não gostei de muitos pedaços de javascript ou de um espaço reservado div em algum lugar. Eu queria uma solução generalizada, que pudesse ser usada em HTML sem adicionar javascript para cada uso. Aqui está o que eu vim com (isso requer 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");
        }
      }
    });

  });

});

E, em HTML, não são necessárias chamadas ou referências de javascript:

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

Como o atributo title é usado para o conteúdo div, o usuário pode até obter a pergunta de confirmação passando o mouse sobre o botão (razão pela qual não usei o atributo title para o bloco). O título da janela de confirmação é o conteúdo da tag alt. O snip javascript pode ser incluído em um arquivo .js generalizado e, simplesmente, ao aplicar uma classe, você tem uma janela de confirmação bonita.

redreinard
fonte
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;
        });
Thulasiram
fonte
0

NOTA: Representante insuficiente para comentar, mas a resposta do BineG funciona perfeitamente na resolução de problemas de postagem com páginas ASPX, conforme destacado por Homer e eco. Em homenagem, aqui está uma variação usando um 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();  
});
Draghon
fonte
0

Outra variação do exposto acima, onde verifica se o controle é um 'asp: linkbutton' ou 'asp: button' que é processado como dois controles html diferentes. Parece funcionar muito bem para mim, mas não o testou extensivamente.

        $(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");
        });
Drauka
fonte
0

Eu estava procurando isso para usar nos botões de link em um ASP.NET Gridview (controle GridView compilado em comandos). Portanto, a ação "Confirmar" na caixa de diálogo precisa ativar um script gerado pelo controle Gridview em tempo de execução. isso funcionou para mim:

 $(".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");
             }
         }
     });
 });
chinkchink
fonte
eval () pode ser prejudicial! A propósito, eu tenho que citar esta parte do seu código: var inlineFunction = $(this).attr("href") + ";"; /* ... */ eval(inlineFunction);Isso não faz sentido!
Sk8erPeter
0

Sei que essa pergunta é antiga, mas foi a primeira vez que tive que usar uma caixa de diálogo de confirmação. Eu acho que essa é a maneira mais curta de fazer isso.

$(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 você goste :)

Mollo
fonte
0

Pessoalmente, vejo isso como um requisito recorrente em muitos modos de exibição de muitos aplicativos ASP.Net MVC.

Por isso, defini uma classe de modelo e uma 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; }
  }
}

E minha visão 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>

E então, toda vez que você precisar em uma exibição, basta usar @ Html.Partial (em scripts de seção para que o JQuery seja definido):

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

O truque é especificar o JQueryClickSelector que corresponderá aos elementos que precisam de um diálogo de confirmação. No meu caso, todas as âncoras com a classe SyLinkDelete, mas poderia ser um identificador, uma classe diferente etc. Para mim, era uma lista de:

<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params">
    <img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0">
</a>
Frederick Samson
fonte
MVC do ASP.Net com jQuery.
Frederick Samson
0

Tópico muito popular e o google encontra isso na consulta "caixa de diálogo jquery perto de qual evento foi clicado". Minha solução lida com eventos SIM, NÃO, ESC_KEY, X corretamente. Quero que minha função de retorno de chamada seja chamada, não importa como o diálogo foi descartado.

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

É fácil redirecionar o navegador para um novo URL ou executar outra coisa na função retval.

Quem eu
fonte
0

Tantas boas respostas aqui;) Aqui está a minha abordagem. Semelhante ao 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'
            }
        ]
    });     
}

E o uso se parece com:

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

function toDoOrNotToDo(){
    showConfirmationDialog("Dialog text", myTestYesFunction, ['My arg 1','My arg 2']);
}
Daniel Więcek
fonte
0

A interface do usuário imediata do JQuery oferece esta solução:

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

Você pode personalizá-lo ainda mais, fornecendo um nome para a função JQuery e passando o texto / título que você deseja exibir como parâmetro.

Referência: https://jqueryui.com/dialog/#modal-confirmation

stef
fonte
-1

Bem, esta é a resposta das suas perguntas ...

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

verifique se você possui o jquery 1.4.4 e o jquery.ui

Costa
fonte
Este é um dos códigos mais feios que já vi em anos. Você usa atributos obsoletos (como LANGUAGE="JavaScript"), usa caracteres maiúsculos e minúsculos misturados, mistura códigos JS simples com códigos jQuery de forma totalmente desnecessária e define estilos com JS em vez de CSS (feio e semanticamente incorreto) e, a propósito, seu estilo modificação (com JS simples) é absolutamente irrelevante em relação à pergunta original. Você definitivamente deve diminuir e embelezar seu código e se concentrar em responder à pergunta original.
Sk8erPeter
-1

Maneira fácil com um 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();
}
Lukas
fonte
2
A questão era especificamente evitar o uso das funções javascript padrão alert / confirm etc., portanto, essa não é uma solução para a pergunta.
Redreinard