Come implementare la finestra di dialogo di "conferma" nella finestra di dialogo dell'interfaccia utente di Jquery?


148

Sto cercando di usare la finestra dell'interfaccia utente di JQuery per sostituire la brutta javascript:alert()scatola. Nel mio scenario, ho un elenco di elementi e accanto a ciascuno di essi, avrei un pulsante "Elimina" per ciascuno di essi. l'installazione html di psuedo sarà qualcosa di seguito:

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

Nella parte JQ, sul documento pronto, impostarei prima il div come una finestra di dialogo modale con il pulsante necessario, e imposterò quelle "a" che sparano alla conferma prima di rimuoverle, come:

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

OK, ecco il problema. durante il tempo di inizializzazione, la finestra di dialogo non avrà idea di chi (oggetto) lo accenderà, e anche l'id oggetto (!). Come posso impostare il comportamento di quei pulsanti di conferma per, se l'utente sceglie ancora SÌ, seguirà il link per rimuoverlo?


V'è un facile da usare plugin per farlo qui: stackoverflow.com/questions/6457750/form-confirm-before-submit

1
Looooong ha cercato la soluzione: stackoverflow.com/a/18474005/1876355
Pierre,

Risposte:


166

Dovevo solo risolvere lo stesso problema. La chiave per far funzionare tutto ciò era che il file dialogdeve essere parzialmente inizializzato nel clickgestore eventi per il collegamento con cui si desidera utilizzare la funzionalità di conferma (se si desidera utilizzarlo per più di un collegamento). Questo perché l'URL di destinazione per il collegamento deve essere inserito nel gestore eventi per il clic sul pulsante di conferma. Ho usato una classe CSS per indicare quali collegamenti dovrebbero avere il comportamento di conferma.

Ecco la mia soluzione, sottratta per essere adatta per un esempio.

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

Credo che questo funzionerebbe per te, se riesci a generare i tuoi collegamenti con la classe CSS ( confirmLink, nel mio esempio).

Ecco un jsfiddle con il codice in esso.

Nell'interesse di una completa divulgazione, noterò che ho trascorso alcuni minuti su questo problema specifico e ho fornito una risposta simile a questa domanda , che era anche senza una risposta accettata al momento.


2
+1 funziona quasi ... ma vedi la risposta di @lloydphillips per una correzione
rohancragg,

Qualcun altro nota che ciò causerà un PostBack completo all'interno di un UpdatePanel? Come lo risolvi?
Homer,

3
C'è qualcosa in questa risposta e nelle risposte di @lloydphillips che proprio non lo fanno proprio per me. La domanda originale è in riferimento a un pulsante "elimina" (collegamento). In generale, non è consigliabile utilizzare un collegamento (HTTP GET) per un'operazione che cambia stato (come un ELIMINA). Entrambe queste risposte presuppongono che l'utente abbia abilitato JavaScript. Se javascript è disabilitato, i collegamenti verranno attivati ​​e l'operazione di eliminazione (o qualsiasi altra cosa) verrà eseguita senza conferma, il che potrebbe essere catastrofico. Speravo di trovare una risposta che trattasse di questo problema.
eco

@echo: ho pensato allo stesso. Per renderlo corretto, penso che ci debba essere un'altra pagina che chiede conferma se JS è disabilitato. Se JS questa pagina potrebbe essere omessa. Forse attraverso un altro parametro get come confermato = vero. Davvero difficile e ingombrante prendere in considerazione i casi con e senza JS. Lo sviluppo Web è un casino.
robsch,

1
@sree Certo. È possibile estrarre una funzione che ha assunto il nome dell'id da utilizzare come parametro e ha effettuato le chiamate jQuery per impostare i gestori di eventi per l'id passato.
Paul Morie,

59

Ho trovato che la risposta di Paul non ha funzionato del tutto perché il modo in cui stava impostando le opzioni DOPO che la finestra di dialogo era stata istanziata sull'evento click era errato. Ecco il mio codice che funzionava. Non l'ho adattato all'esempio di Paul, ma è solo la differenza del baffo di un gatto in termini di alcuni elementi che hanno un nome diverso. Dovresti essere in grado di risolverlo. La correzione è nel setter dell'opzione di dialogo per i pulsanti sull'evento click.

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

    });

});

Spero che questo aiuti qualcun altro dato che questo post inizialmente mi ha portato sulla strada giusta, ho pensato che sarebbe meglio pubblicare la correzione.


1
Non vedo cosa hai fatto di diverso dalla risposta di Paul.
Grant Birchmeier,

2
Mi sembra buono. L'unica cosa che vorrei suggerire sarebbe di utilizzare oninvece di click, poiché continuerà a funzionare se (ad esempio) il campo viene ridisegnato utilizzando jQuery - api.jquery.com/on
Aaron Newton

1
hah "differenza di baffo di gatto" - Ho bisogno di usare quella frase di più.
Chad Gorshing,

27

Ho creato una mia funzione per una finestra di dialogo di conferma jquery. Ecco il codice

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

Ora per usare questo nel tuo codice, scrivi semplicemente quanto segue

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

Vai avanti.


Questa è una buona soluzione, è molto simile alla mia che uso per ottenere URL ajax e visualizzazione rapida ... funzione JQueryDialog (url) {$ ("# dialog"). Remove (); $ ("body"). append ("<div id = 'dialog' title = 'www.mysite.com'> </div>"); $ ("# dialog"). load (url) .dialog ({ridimensionabile: false, larghezza: 770, altezza: 470, modale: vero, pulsanti: {"Chiudi": function () {$ (this) .dialog ( "close"); $ ("# dialog"). remove ();}}}); }
conners

6

Soluzione semplice e breve che ho appena provato e funziona

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

quindi aggiungi semplicemente class = "confirm" al tuo link e funziona!


Il messaggio .text chiede "Sicuro?" ma non offre una scelta di sì / no, ok / annulla. In che modo l'utente indica se sono "sicuri" o "non sicuri"?
Genki,

6

Questa è la mia soluzione .. spero che possa aiutare chiunque. È scritto al volo invece di copypasted, quindi perdonami per eventuali errori.

$("#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 preferisco questa soluzione :)

modifica: mi dispiace .. avrei davvero dovuto spiegarlo più in dettaglio. Mi piace perché secondo me è una soluzione elegante. Quando l'utente fa clic sul pulsante che deve essere prima confermato, l'evento viene annullato come deve essere. Quando si fa clic sul pulsante di conferma, la soluzione non è quella di simulare un clic sul collegamento, ma di attivare lo stesso evento jquery nativo (clic) sul pulsante originale che si sarebbe attivato se non fosse stata visualizzata una finestra di dialogo di conferma. L'unica differenza è un diverso spazio dei nomi di eventi (in questo caso 'confermato') in modo che la finestra di dialogo di conferma non venga più visualizzata. Il meccanismo nativo di Jquery può quindi subentrare e le cose possono funzionare come previsto. Un altro vantaggio è che può essere utilizzato per pulsanti e collegamenti ipertestuali. Spero di essere stato abbastanza chiaro.


Valuta la possibilità di modificare il tuo post e dire alla community perché preferisci questa soluzione. Cosa lo rende migliore per te?
Fuzzical Logic,

Ho modificato il post. Spero che abbia più senso ora. Quando l'ho scritto sembrava così chiaro che non c'era bisogno di un commento. Che differenza quando l'ho rivisitato dopo un po '... :)
BineG

Un'ottima soluzione molto pulita! Non ho mai letto degli spazi dei nomi degli eventi prima. Grazie per quello!
griffla,

BEAAUUTIFULLL! "... ma per attivare lo stesso evento jquery nativo (clic) sul pulsante originale .." suona beauutifulll !! Grazie per $("#btn").trigger("click.confirmed");
Irf

4

So che questa è una vecchia domanda, ma ecco la mia soluzione che utilizza gli attributi di dati HTML5 in MVC4:

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

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

Mi piace questa soluzione, grazie. Facile da capire e funziona per me. Non ho usato la parte @ Url.Action, ma funziona con un URL generato dal mio MVC lato server (PHP / Symfony2).
Fazy

3

Questo lo farà?

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

Grazie per questa risposta Sono sicuro che lo proverò (e tuttavia sembra funzionale). Uno dei problemi che ho visto da molte risposte qui è la mancanza di generalità. Se la pagina ha un'altra serie di controlli (o collegamenti o così via) che necessitavano di conferma, sembra che abbiamo bisogno di più dichiarazioni sull'interazione / azione. Il vecchio modo javascript, cioè href = "javascript: confirm ('link_url');" è semplice ed elegante e si adatta a tutti i casi simili. Naturalmente il metodo javascript è troppo invadente per cui le persone senza javascript mancheranno del tutto il collegamento. Ancora una volta grazie per l'ottima risposta.
xandy,

3

Come sopra. I post precedenti mi hanno portato sulla strada giusta. È così che l'ho fatto. L'idea è di avere un'immagine accanto a ogni riga della tabella (generata dallo script PHP dal database). Quando si fa clic su un'immagine, l'utente viene reindirizzato all'URL e, di conseguenza, il record appropriato viene eliminato dal database mentre mostra alcuni dati relativi al record selezionato nella finestra di dialogo dell'interfaccia utente jQuery.

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

Finestra di dialogo div:

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

Link immagine:

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

In questo modo puoi passare i valori del loop PHP nella finestra di dialogo. L'unico aspetto negativo è l'utilizzo del metodo GET per eseguire effettivamente l'azione.


2

Cosa ne pensi di questo:

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

L'ho provato in questo 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>

Rimuove l'intero elemento li, puoi adattarlo alle tue esigenze.


2

(A partire dal 22/03/2016, il download sulla pagina collegata non funziona. Lascio il link qui nel caso in cui lo sviluppatore lo risolva ad un certo punto perché è un piccolo plug-in eccezionale. Segue il post originale. alternativa e un collegamento che funziona effettivamente: jquery.confirm .)

Potrebbe essere troppo semplice per le tue esigenze, ma potresti provare questo plugin di conferma jQuery . È davvero semplice da usare e fa il lavoro in molti casi.


Il collegamento mi porta a un profilo collegato. Sembra che non sia possibile visualizzare il plug-in se non si è membri premium collegati.
Zane,

Ho aggiornato il collegamento in modo che funzioni di nuovo. Lo sviluppatore deve reindirizzare il vecchio link al suo profilo LinkedIn. Se lo cambia di nuovo, basta cercarlo su Google usando "jquery confirm plugin nadia".
Grahamesd,

Grazie! Mentre ho già implementato la mia versione ora, continuerò a dare un'occhiata.
Zane,

il collegamento è di nuovo morto
Valamas,

1

Per quanto odio usare eval, mi è sembrato il modo più semplice per me, senza causare molti problemi a seconda delle diverse circostanze. Simile alla funzione settimeout 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

Mi sono imbattuto in questo me stesso e ho finito con una soluzione, che è simile a diverse risposte qui, ma implementata in modo leggermente diverso. Non mi piacevano molti pezzi di javascript o un div segnaposto da qualche parte. Volevo una soluzione generalizzata, che potesse quindi essere utilizzata in HTML senza aggiungere javascript per ogni utilizzo. Ecco cosa mi è venuto in mente (questo richiede 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 poi in HTML, non sono necessarie chiamate o riferimenti javascript:

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

Poiché l'attributo title viene utilizzato per il contenuto div, l'utente può anche ottenere la domanda di conferma passando con il mouse sopra il pulsante (motivo per cui non ho utilizzato l'attributo title per il riquadro). Il titolo della finestra di conferma è il contenuto del tag alt. Lo snip javascript può essere incluso in un include .js generalizzato e, semplicemente applicando una classe, hai una finestra di conferma.


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: non abbastanza rappresentante per commentare, ma la risposta di BineG funziona perfettamente nella risoluzione dei problemi di postback con le pagine ASPX, come evidenziato da Homer ed eco. In onore, ecco una variante che utilizza una finestra di dialogo dinamica.

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

Un'altra variante di cui sopra verifica se il controllo è un 'asp: linkbutton' o 'asp: button' che viene visualizzato come due diversi controlli HTML. Sembra funzionare bene per me, ma non l'ho testato ampiamente.

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

Stavo cercando questo da usare sui pulsanti di collegamento all'interno di un Gridview ASP.NET (controllo GridView incorporato nei comandi) Quindi l'azione "Conferma" nella finestra di dialogo deve attivare uno script generato dal controllo Gridview in fase di esecuzione. questo ha funzionato per me:

 $(".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 () può essere dannoso! A proposito, devo citare questa parte del tuo codice: var inlineFunction = $(this).attr("href") + ";"; /* ... */ eval(inlineFunction);non ha affatto senso!
Sk8erPeter,

0

So che questa domanda è vecchia ma questa è stata la prima volta che ho dovuto usare una finestra di dialogo di conferma. Penso che questo sia il modo più breve per farlo.

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

Spero vi piaccia :)


0

Personalmente, vedo questo come un requisito ricorrente in molte viste di molte applicazioni ASP.Net MVC.

Ecco perché ho definito una classe di modello e una vista parziale:

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 la mia visione parziale:

@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 poi, ogni volta che ne hai bisogno in una vista, usi semplicemente @ Html.Partial (lo hai fatto negli script di sezione in modo da definire JQuery):

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

Il trucco è specificare JQueryClickSelector che corrisponderà agli elementi che richiedono una finestra di dialogo di conferma. Nel mio caso, tutti si ancorano con la classe SyLinkDelete ma potrebbe essere un identificatore, una classe diversa ecc. Per me era un elenco di:

<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

Questo argomento molto popolare e Google lo trova per la query "finestra di dialogo jquery che chiude l'evento su cui è stato fatto clic". La mia soluzione gestisce correttamente gli eventi YES, NO, ESC_KEY, X. Voglio che la mia funzione di callback venga chiamata, indipendentemente da come è stata disposta la finestra di dialogo.

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

È facile reindirizzare il browser a un nuovo URL o eseguire qualcos'altro su retval di funzione.


0

Così tante buone risposte qui;) Ecco il mio approccio. Simile a eval () utilizzo.

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 l'uso appare come:

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

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

0

L'interfaccia utente predefinita di JQuery offre questa soluzione:

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

È possibile personalizzare ulteriormente ciò fornendo un nome per la funzione JQuery e passando il testo / titolo che si desidera visualizzare come parametro.

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


-1

Bene, questa è la risposta alle tue domande ...

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

assicurati di avere jquery 1.4.4 e jquery.ui


Questo è uno dei codici più brutti che abbia mai visto in questi anni. Usi attributi deprecati (come LANGUAGE="JavaScript"), usi caratteri maiuscoli e minuscoli misti, mischi codici JS semplici con codici jQuery totalmente inutilmente e imposti stili con JS invece di CSS (brutti e semanticamente errati) e, a proposito, il tuo stile la modifica (con JS semplice) è assolutamente irrilevante rispetto alla domanda originale. Dovresti assolutamente abbreviare e abbellire il tuo codice e concentrarti sulla risposta alla domanda originale.
Sk8erPeter,

-1

Modo semplice con un tocco di 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
Il punto era specificamente quello di evitare di utilizzare le funzioni javascript predefinite di avviso / conferma ecc., Quindi questa non è una soluzione alla domanda.
Redreinard,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.