Comment mettre en œuvre la boîte de dialogue" confirmation " dans la boîte de dialogue jQuery UI?

j'essaie d'utiliser la boîte de dialogue jQuery UI pour remplacer la boîte laide javascript:alert() . Dans mon scénario, j'ai une liste d'éléments, et à côté de chaque individu d'entre eux, je voudrais avoir un bouton "supprimer" pour chacun d'eux. la configuration html de psuedo sera quelque chose de ce qui suit:

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

dans la partie JQ, sur document ready, je voudrais d'abord configurer le div pour qu'il soit un Dialogue modal avec le bouton nécessaire, et mettre ces "a" à lancer à la confirmation avant de supprimer, comme:

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

OK, voilà le problème. pendant le temps d'entrée, la boîte de dialogue n'aura aucune idée de qui (item) va l'allumer, et aussi l'id item (!). Comment puis-je configurer le comportement de ces boutons de confirmation afin de, si l'utilisateur choisit toujours oui, il suivra le lien pour le supprimer?

144
demandé sur Danil Speransky 2009-05-20 13:26:08

23 réponses

j'ai juste eu à résoudre le même problème. La clé pour que cela fonctionne est que le dialog doit être partiellement initialisé dans le gestionnaire d'événements click pour le lien avec lequel vous voulez utiliser la fonctionnalité de confirmation (si vous voulez utiliser cette fonctionnalité pour plus d'un lien). C'est parce que l'URL cible pour le lien doit être injecté dans le gestionnaire d'événements pour le clic de bouton de confirmation. J'ai utilisé une classe CSS pour indiquer quels liens devraient avoir le comportement de confirmation.

voici ma solution, abstraite pour servir d'exemple.

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

je crois que cela fonctionnerait pour vous, si vous pouvez générer vos liens avec la classe CSS ( confirmLink , dans mon exemple).

voici un jsfiddle avec le code dedans.

Dans l'intérêt de la divulgation complète, je note que j'ai passé quelques minutes sur ce problème particulier et j'ai fourni un réponse similaire à cette question , qui était également sans réponse acceptée à l'époque.

162
répondu Paul Morie 2017-05-23 12:10:29

J'ai trouvé que la réponse de Paul n'a pas tout à fait fonctionné car la façon dont il définissait les options après que la boîte de dialogue a été instanciée sur l'événement de clic étaient incorrectes. Voici mon code qui fonctionne. Je ne l'ai pas adapté à L'exemple de Paul, mais c'est seulement la différence d'un chat moustache en termes de certains éléments sont nommés différemment. Vous devriez être en mesure de s'en sortir. La correction est dans le setter de l'option de dialogue pour les boutons sur l'événement 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");

    });

});

Espérons que cela aide quelqu'un d'autre que ce post à l'origine, m'a mis sur la bonne piste, j'ai pensé que je ferais mieux de poster la correction.

59
répondu lloydphillips 2014-10-09 08:39:32

j'ai créé ma propre fonction pour un dialogue de confirmation de l'interface jQuery ui. Voici le code

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

maintenant pour l'utiliser dans votre code, il suffit d'écrire

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

continuez.

27
répondu d-coder 2013-05-13 13:59:09

solution Simple et courte que je viens d'essayer et il fonctionne

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

alors il suffit d'ajouter la classe= "confirm" à votre lien a et cela fonctionne!

6
répondu user681365 2011-03-29 04:49:08

C'est ma solution.. j'espère que cela aide quelqu'un. C'est écrit à la volée au lieu d'être copypté, alors pardonnez-moi pour les erreurs.

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

personnellement je préfère cette solution:)

edit: Sorry.. j'ai vraiment shouldve expliqué plus en détail. Je l'aime parce qu'à mon avis c'est une solution élégante. Lorsque l'utilisateur clique sur le bouton qui doit être confirmée d'abord l'événement est annulé en tant qu'il a à être. Quand le bouton de confirmation est cliqué la solution n'est pas de simuler un clic de lien mais de déclencher le même événement jQuery natif (clic) sur le bouton original qui aurait déclenché s'il n'y avait pas de dialogue de confirmation. La seule différence étant un espace de nom d'événement différent (dans ce cas 'confirmé') de sorte que la boîte de dialogue de confirmation ne s'affiche plus. Jquery mécanisme natif peut alors prendre le relais et les choses peuvent fonctionner comme prévu. Un autre avantage est qu'il peut être utilisé pour les boutons et les hyperliens. J'espère avoir été assez clair.

6
répondu BineG 2012-07-28 13:35:45

je sais que c'est une vieille question Mais voici ma solution en utilisant HTML5 attributs de données dans MVC4:

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

code 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");
});
4
répondu woggles 2013-05-13 14:11:31

ça ira?

$("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');
});
3
répondu andi 2009-05-20 09:39:47

comme ci-dessus. Postes précédents m'a mis sur la bonne voie. C'est de cette façon que j'ai fait. L'idée est d'avoir une image à côté de chaque ligne de la table (générée par le script PHP De La base de données). Quand une image est cliquée, l'utilisateur est redirigé vers L'URL, et en conséquence, l'enregistrement approprié est supprimé de la base de données tout en montrant certaines données liées à l'enregistrement cliqué dans la boîte de dialogue jQuery UI.

le code 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');
}
"151930920 boîte de Dialogue" div":

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

lien D'Image:

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

de cette façon, vous pouvez passer au-dessus des valeurs de boucle PHP dans la boîte de dialogue. Le seul inconvénient est d'utiliser la méthode GET pour réellement effectuer l'action.

3
répondu LukeP 2013-05-13 14:10:33

Que pensez-vous de ceci:

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

Je l'ai testé à ce 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>

il supprime l'élément li entier, vous pouvez l'adapter à vos besoins.

2
répondu kgiannakakis 2009-05-20 09:49:45

(Comme de 03/22/2016, le télécharger sur la page liée à la ne fonctionne pas. Je laisse le lien ici au cas où le développeur le corrigerait à un moment donné parce que c'est un super petit plugin. Le post original de la façon suivante. Une alternative, et un lien qui fonctionne réellement: jquery.confirmez .)

il peut être trop simple pour vos besoins, mais vous pourriez essayer ce jQuery confirmer plugin . C'est vraiment simple à utiliser et fait le travail dans de nombreux cas.

2
répondu grahamesd 2016-03-23 01:53:34

même si je déteste utiliser eval, il me semblait que c'était le moyen le plus facile pour moi, sans causer beaucoup de problèmes selon les circonstances. Similaire à la fonction javascript settimeout.

<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
répondu SethT 2011-11-10 02:05:30

j'ai moi-même rencontré ceci et j'ai fini avec une solution, qui est similaire à plusieurs réponses ici, mais mise en œuvre légèrement différente. Je n'ai pas aimé beaucoup de javascript, ou une div quelque part. Je voulais une solution généralisée, qui pourrait alors être utilisé en HTML sans ajouter javascript pour chaque utilisation. Voici ce que j'ai trouvé (cela nécessite 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");
        }
      }
    });

  });

});

et puis en HTML, pas d'appels javascript ou des références sont nécessaires:

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

comme l'attribut title est utilisé pour le contenu div, l'utilisateur peut même obtenir la question de confirmation en survolant le bouton (c'est pourquoi je n'ai pas utilisé l'attribut title pour la tuile). Le titre de la fenêtre de confirmation est le contenu de la balise alt. Le JavaScript snip peut être inclus dans une généralisation .js include, et simplement en appliquant une classe vous avez une jolie fenêtre de confirmation.

1
répondu redreinard 2013-02-15 02:29:27
$("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
répondu Thulasiram 2012-05-25 11:36:21

NOTE: Pas assez de rép.pour commenter, mais la réponse de BineG fonctionne parfaitement dans la résolution des problèmes de postback avec les pages ASPX comme souligné par Homer et echo. En honneur, voici une variation utilisant un dialogue dynamique.

$('#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
répondu Draghon 2012-10-29 15:57:17

une autre variante de ce qui précède où il vérifie si le contrôle est un 'asp:linkbutton' ou 'asp:button' qui rend deux contrôles html différents. Semble très bien fonctionner pour moi mais je n'ai pas testé beaucoup.

        $(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
répondu Drauka 2013-03-15 20:48:57

je cherchais ceci à utiliser sur les boutons de lien dans un ASP.NET GridView (GridView Control build in Commands)) Ainsi, L'action" confirmer " dans la boîte de dialogue doit activer un script généré par la commande Gridview à l'exécution. cela a fonctionné pour moi:

 $(".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");
             }
         }
     });
 });
0
répondu chinkchink 2013-05-13 14:21:32

je sais que cette question Est ancienne mais c'était la première fois que je devais utiliser un dialogue de confirmation. Je pense que c'est la façon la plus courte de le faire.

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

j'espère que vous l'aimez :)

0
répondu Mollo 2013-06-06 18:45:45

personnellement, je vois cela comme une exigence récurrente dans de nombreux points de vue de nombreux ASP.Net MVC applications.

C'est pourquoi j'ai défini une classe de modèle et une vue partielle:

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

et mon opinion partielle:

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

et puis, chaque fois que vous en avez besoin dans une vue, vous utilisez juste @Html.Partielle (en fait dans la section scripts de sorte que JQuery est définie):

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

le truc est de spécifier le JQueryClickSelector qui va correspondre aux éléments qui ont besoin d'une boîte de dialogue de confirmation. Dans mon cas, tous les ancres avec la classe SyLinkDelete mais il pourrait être un identificateur, une classe différente, etc. Pour moi, c'était une liste de:

<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params">
    <img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0">
</a>
0
répondu Frederick Samson 2013-11-08 16:40:45

sujet très populaire et google trouve cela pour la requête" jQuery dialog close which event was clicked". Ma solution gère les événements YES,NO,ESC_KEY,X correctement. Je veux que ma fonction de rappel soit appelée peu importe comment le dialogue a été disposé.

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

il est facile de rediriger le navigateur vers une nouvelle url ou effectuer quelque chose d'autre sur la fonction retval.

0
répondu Whome 2014-12-16 16:10:25

tant de bonnes réponses ici ;) Voici ma démarche. Similaire à la fonction 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'
            }
        ]
    });     
}

et l'usage ressemble à:

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

function toDoOrNotToDo(){
    showConfirmationDialog("Dialog text", myTestYesFunction, ['My arg 1','My arg 2']);
}
0
répondu Daniel Więcek 2017-05-08 13:13:02

de la boîte de JQuery UI propose cette solution:

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

vous pouvez personnaliser ceci en fournissant un nom pour la fonction JQuery et en passant le texte/titre que vous voulez afficher comme paramètre.

référence: https://jqueryui.com/dialog/#modal-confirmation

0
répondu stef 2017-10-23 20:14:02

voilà la réponse à vos questions...

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

assurez-vous que vous avez jquery 1.4.4 et jquery.l'interface utilisateur

-1
répondu Costa 2011-12-21 19:40:57

facile avec une touche 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();
}
-1
répondu Lukas 2012-12-13 21:36:05