Une boîte de confirmation modale utilisant JQuery est-elle Possible?

j'ai juste eu à résoudre le même problème. J'ai fini par utiliser le dialog widget de jQuery UI . J'ai pu implémenter ceci sans utiliser de callbacks avec la mise en garde 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 bouton de confirmation cliquez.

voici ma solution, abstraite pour servir d'exemple. J'utilise une classe CSS pour indiquer quels liens devraient avoir le comportement de confirmation.

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




  }); // end of $(document).ready


</script>

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

Check out http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/

ils ont une bonne variété de modal-boxes pour JQuery.

je pense que vous devriez voir http://www.ericmmartin.com/simplemodal/

une boîte de dialogue modale de la fonction de confirmation JavaScript. Montre l'utilisation de onShow ainsi que la façon d'afficher un dialogue de confirmation modal au lieu de la boîte de dialogue JavaScript confirmer par défaut.

avez-vous vu le Dialogue Modal jQuery sur site jQuery UI ?

• démo du dialogue de Confirmation modale

j'ai blogué sur la solution à ce problème ici: http://markmintoff.com/2011/03/asp-net-jquery-confirm-dialog /

bien que l'article soit orienté vers ASP.Net il peut être facilement adapté à php. Il s'agit d'empêcher le clic avec un retour false et lorsque l'utilisateur clique "OK" ou "oui" ou ce que-have-you; le lien ou le bouton est tout simplement cliqué à nouveau.

var confirmed = false;
function confirmDialog(obj)
{
    if(!confirmed)
    {
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Yes": function()
                {
                    $( this ).dialog( "close" );
                    confirmed = true; obj.click();
                },
                "No": function()
                {
                    $( this ).dialog( "close" );
                }
            }
        });
    }

    return confirmed;
}

essayez et faites-moi savoir ce que vous penser. J'espère que cela résout votre problème.

vous devriez être capable de surcharger la fenêtre standard.confirmer la fonction écrire le code suivant.

window.confirm = modalConfirm

, alors vous aurez besoin de faire une fonction comme ceci

function modalConfirm(message){
  // put your code here and bind "return true/false" to the click event
  // of the "Yes/No" buttons.
}

ça devrait marcher, même si Je ne l'ai pas encore testé. Je vais faire exactement cela maintenant et je vous ferai savoir comment cela a fonctionné.

Edit: J'ai testé mon exemple ci-dessus maintenant, et il n'était pas possible, vous aurez à passer dans un fonction de rappel à votre fonction de confirmation écrasée comme ceci:

function modalConfirm(message, callback){
  ... 
  $("button.yes").click(function(){
     callback(result);
  });
  ...
}

..faire votre appel à la fonction ressembler à ceci:

confirm("Are you sure?", function(result){
  alert(result);
});

En d'autres termes, il n'est pas possible de remplacer la fenêtre par défaut.confirmer la fonction sans provoquer une mauvaise boucle qui provoque la suspension du navigateur. Je pense que vous devrez modifier vos appels de confirmation comme ci-dessus.

puisque cette question semble manquer la réponse canonique: il n'y a aucun moyen de programmatically pause (et reprendre) l'exécution javascript comme alert ou confirm do .

cela dit, s'appuyer sur ce comportement aujourd'hui est généralement considéré comme une mauvaise pratique étant donné la nature filetée unique de javascript, et la raison pour laquelle les fonctions mentionnées ci-dessus font une pause d'exécution est probablement parce qu'ils ont été conçus quand le web était encore à un stade très précoce, et plus tard laissé inchangé pour assurer la compatibilité. Étant donné que le point de mire de nos jours est d'écrire autant de code js non-bloquant que possible, il est peu probable que la fonctionnalité pour arrêter programmatically js ne sera jamais faire à aucune spécification future D'ECMAScript, donc votre meilleur pari est de retravailler votre site pour s'assurer que les dialogues de confirmation et d'alerte peuvent coexister avec d'autres codes javascript en arrière-plan.

ma façon de contourner ce problème était d'ajouter des données arbitraires à l'objet, et vérifier ces données sur le clic. Si elle existait, procéder avec la fonction comme normale, sinon confirmer avec un oui / non (dans mon cas en utilisant une superposition jqtools). Si l'utilisateur clique Oui-insérez les données dans l'objet, simulez un autre clic et essuyez les données. S'ils cliquent Non, fermez la superposition.

Voici mon exemple:

$('button').click(function(){
    if ($(this).data('confirmed')) {
        // Do stuff
    } else {
        confirm($(this));
    }
});

et c'est ce que j'ai fait à outrepasser la fonction de confirmation (en utilisant une superposition d'outils jquery):

window.confirm = function(obj){
    $('#dialog').html('\
        <div>\
            <h2>Confirm</h2>\
            <p>Are you sure?</p>\
            <p>\
                <button name="confirm" value="yes" class="facebox-btn close">Yes</button>\
                <button name="confirm" value="no" class="facebox-btn close">No</button>\
            </p>\
        </div>').overlay().load();
    $('button[name=confirm]').click(function(){
        if ($(this).val() == 'yes') {
            $('#dialog').overlay().close();
            obj.data('confirmed', true).click().removeData('confirmed');
        } else {
            $('#dialog').overlay().close();
        }
    });
}

j'ai une solution qui peut être utilisée pour remplacer la fenêtre par défaut.confirmer la fonction. Il ne nécessite pas que vous outrepassiez la fenêtre.confirmer que ce n'est pas entièrement possible.

ma solution vous permet d'avoir une classe générale comme moi, disons "confirmer-action" que vous placez sur tout élément qui nécessite une confirmation avant d'être traité. Le script est très simple et utilise jQuery, jQuery UI Dialog et aucun autre plugin.

vous pouvez trouver la démonstration complète de la mise en œuvre sur jsFiddle, http://jsfiddle.net/74NDD/39 / .

Utilisation:

• ajoutez ce code javascript dans votre tête html ou avant tout autre clic reliure que vous avez dans votre javascript.

  $("#dialog:ui-dialog").dialog("destroy");
  
  $('.confirm-action').live('click', function(e) {
      $self = $(this);
  
      if (e && e.stopImmediatePropagation && $self.data('confirmed') !== true) {
          e.stopImmediatePropagation();
  
          $('#confirm-action-dialog').dialog({
              height: 110,
              modal: true,
              resizable: false,
              draggable: false,
              buttons: {
                  'Yes': function() {
                      $(this).dialog('close');
                      $self.data('confirmed', true);
                      $self.click();
                  },
                  'No': function() {
                      $self.data('confirmed', false);
                      $(this).dialog('close');
                  }
              }
          });
      } else if ($self.data('confirmed') === true) {
          e = window.event;
          e.cancelBubble = false;
          $self.data('confirmed', false);
      }
  
      return false;
  });
  

• placez ce html quelque part dans le corps (il est caché par défaut).

  <div style="display:none;" id="confirm-action-dialog" title="Confirm Action?">
      <p>
          <span class="ui-icon ui-icon-alert"></span>
          Are you sure you want to continue?
      </p>
  </div>
  

• mettre la classe "confirm-action" sur tout élément qui nécessite une confirmation.

  confirm-action

cette solution fonctionne parfaitement car elle ne modifie pas le bouillonnement de l'événement jQuery, elle interrompt simplement tous les autres événements jusqu'à ce que l'utilisateur décide ce qu'il veut faire.

j'espère que c'est utile pour quelqu'un d'autre car je n'ai pas été en mesure de trouver une autre solution qui ne nécessite pas l'installation d'un autre plugin jQuery ou de faire quelque autre hack.

construire en plus de la solution de Banu (merci une tonne!) pour en faire un pop solution sur le haut de chaque page. Coller ce code à l'intérieur:

$(document).ready

et ajouter la classe" confirmminkfollow "à tous les liens que vous voulez confirmer:

$(".confirmLinkFollow").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");
var $dialog_link_follow_confirm = $('<div></div>').
        html("<p>Are you sure?</p>").
        dialog({autoOpen: false,
        title: 'Please Confirm',
        buttons : {
            "Confirm" : function() { 
                window.location.href = targetUrl; 
        },
        "Cancel" : function() { 
                $(this).dialog("close"); 
            }
        },

        modal: true,
    minWidth: 250,
    minHeight: 120
    }
    );


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

placez la redirection à l'intérieur de la fonction comme:

<script>
    function confirmRedirect(url, desciption) {
       if (confirmWindow(desciption)) {
           window.location = url;
       }
    }
</script>

et appelez ça comme ça:

<a href="javascript:confirmRedirect('somlink.php','Are you sure?')">Go!</a> 

presque trois ans plus tard, je cherche quelque chose de semblable. Comme je n'ai pas trouvé de solution "rapide" acceptable, j'ai écrit quelque chose qui se rapproche beaucoup des critères de L'OP. Je pense que d'autres pourraient trouver ça utile à l'avenir.

JavaScript est piloté par un événement et cela signifie qu'il ne supporte aucune sorte de boucle "wait" ou "sleep" que nous pouvons utiliser pour mettre en pause une pure fonction de confirmation javascript. Les options impliquent de brûler les cycles de processeur, en utilisant un navigateur plugin, or AJAX. Dans notre monde de plus en plus mobile, et avec des connexions internet parfois confuses, aucune de ces solutions n'est géniale. Cela signifie que nous devons revenir de notre fonction "confirmer" immédiatement.

Cependant, puisqu'il n'est pas "faux" de la logique dans l'extrait de code ci-dessus (ie. rien n'est fait lorsque l'utilisateur clique "Cancel"), nous pouvons déclencher l'événement "click" ou "submit" à nouveau lorsque l'utilisateur clique "OK."Pourquoi ne pas mettre un drapeau et réagir sur la base de ce drapeau dans notre fonction "confirmer"?

pour ma solution, j'ai choisi D'utiliser FastConfirm plutôt qu'un dialogue" modal". Vous pouvez facilement modifier le code pour utiliser tout ce que vous voulez, mais mon exemple a été conçu pour utiliser ceci:

https://github.com/pjparra/Fast-Confirm

en raison de la nature de ce que cela fait, je ne vois pas une façon propre de l'emballer. Si vous sentez que c'est trop d'aspérités, n'hésitez pas à lisser les ou réécrivez votre code comme tout le monde l'a recommandé:

/* This version of $.fn.hasEvent is slightly modified to provide support for
 * the "onclick" or "onsubmit" tag attributes. I chose this because it was
 * short, even if it is cryptic.
 *
 * Learn more about the code by Sven Eisenschmidt, which is licensed under
 * the MIT and GPL at:
 *     http://github.com/fate/jquery-has-event
 */
(function($) {
    $.fn.hasEvent = function(A, F, E) {
        var L = 0;
        var T = typeof A;
        E = E ? E : this;
        var V = (E.attr('on'+A) != undefined);
        A = (T == 'string') ? $.trim(A) : A;
        if (T == 'function')
            F = A, A = null;
        if (F == E)
            delete(F);
        var S = E.data('events');
        for (e in S)
            if (S.hasOwnProperty(e))
                L++;
        if (L < 1)
            return V; // = false;
        if (A && !F) {
            return V = S.hasOwnProperty(A);
        } else if(A && S.hasOwnProperty(A) && F) {
            $.each(S[A], function(i, r) {
                if(V == false && r.handler == F) V = true;
            });
            return V;
        } else if(!A && F) {
            $.each(S, function(i, s) {
                if (V == false) {
                    $.each(s, function(k, r) {
                        if (V == false && r.handler == F)
                            V = true;
                    });
                }
            });
        }
        return V;
    }
    $.extend($, {hasEvent: $.fn.hasEvent});
}) (jQuery);

/* Nearly a drop-in replacement for JavaScript's confirm() dialog.
 * Syntax:
 *   onclick="return jq_confirm(this, 'Are you sure that you want this?', 'right');"
 *
 * NOTE: Do not implement "false" logic when using this function. Find another way.
 */
var jq_confirm_bypass = false;
function jq_confirm(el, question, pos) {
    var override = false;
    var elem = $(el);

    if ($.fn.fastConfirm == undefined) {
        override = confirm(question);
    } else if (!jq_confirm_bypass) {
        if (pos == undefined) {
            pos = 'right';
        }

        elem.fastConfirm({
            position: pos,
            questionText: question,
            onProceed: function(trigger) {
                var elem = $(trigger);
                elem.fastConfirm('close');

                if (elem.hasEvent('click')) {
                    jq_confirm_bypass = true;
                    elem.click();
                    jq_confirm_bypass = false;
                }
                if (elem.hasEvent('submit')) {
                    jq_confirm_bypass = true;
                    elem.submit();
                    jq_confirm_bypass = false;
                }
                // TODO: ???
            },
            onCancel: function(trigger) {
                $(trigger).fastConfirm('close');
            }
        });
    }

    return override ? override : jq_confirm_bypass;
}

So... onclick="return confirm('voulez-vous tester?');" deviendrait onclick="return jq_confirm(this, 'voulez-vous tester?');" Le pos/"droite" paramètre est facultatif et est spécifiquement pour les Fast-Confirmer.

lorsque vous cliquez, la fonction jq_confirm() lance la boîte de dialogue jQuery et renvoie "false"."Lorsque l'utilisateur clique sur" OK", jq_confirmm () affiche un drapeau, appelle l'événement original click (ou submit), retourne "true", puis désactive le drapeau au cas où vous voudriez rester sur la même page.

le lien suivant a un plugin jQuery pour confirmer les boîtes similaires à construire comme confirmer ("quelque chose") en JavaScript

http://labs.abeautifulsite.net/archived/jquery-alerts/demo /