Est un Modal Boîte de confirmation à l'Aide de JQuery Possible?

J'ai juste eu à résoudre le même problème. Je me suis retrouvé à l'aide de la boîte de dialogue widget de JQuery UI. J'ai été en mesure de mettre en œuvre sans l'aide de rappels avec l'avertissement que les dialog doivent être partiellement initialisé dans le click gestionnaire d'événement pour le lien que vous voulez utiliser la confirmation avec la fonctionnalité (si vous souhaitez utiliser ce pour plus d'un lien). C'est parce que l'URL cible du lien doit être injecté dans le gestionnaire d'événement pour la confirmation de clic de bouton.

Voici ma solution, disparaît à être adapté pour un exemple. J'utilise une classe CSS pour indiquer les liens doivent avoir la confirmation de comportement.

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

Avez-vous vu le jQuery boîte de Dialogue Modale sur jQuery UI site?

• Modale de Dialogue de Confirmation de la démo

Vous devriez être en mesure de remplacer la fenêtre standard.confirmer la fonction écrire le code suivant.

window.confirm = modalConfirm

ensuite, 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.
}

Cela devrait fonctionner, bien que je n'ai pas encore testé. Je vais faire exactement ce droit maintenant et laissez-vous savez tous comment ça a fonctionné.

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

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

..faire de 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 boucle méchant qui provoque le navigateur pour les bloquer. Je pense que vous devez modifier votre confirmer appels, comme ci-dessus.

Mon moyen de contourner ce problème est d'ajouter quelques données arbitraires à l'objet, et de vérifier que les données sur cliquez sur. Si elle existait, procéder à la fonction comme normal, sinon confirmer avec oui/non (dans mon cas, à l'aide d'un jqtools de superposition). Si l'utilisateur clique sur oui - insérer les données dans l'objet, de simuler un autre et cliquez sur effacer les données. S'ils cliquent pas, il suffit de fermer 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 pour remplacer le confirmer fonction (à l'aide d'un des outils de jquery overlay):

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

De construction sur le dessus de Banu la solution (merci une tonne!) pour faire une pop de la solution sur le haut de chaque page. Collez ce code à l'intérieur:

$(document).ready

Et d'ajouter "confirmLinkFollow" classe pour tous les liens que vous voulez confirmé:

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

Près de trois ans plus tard, je suis à la recherche de quelque chose de similaire. Depuis je n'ai pas trouvé acceptable "rapide" de la solution, j'ai écrit quelque chose qui vient de très près les critères de l'OP. Je l'ai trouver d'autres peuvent trouver utile dans l'avenir.

JavaScript est piloté par les événements et qui signifie qu'il ne prend pas en charge toute sorte de "wait" ou "veille" de la boucle que l'on peut utiliser pour mettre en pause un pur javascript confirmer la fonction. Les options de gravure de cycles de processeur, à l'aide d'un plugin de navigateur, ou AJAX. De plus en plus mobile du monde, et avec parfois inégale des connexions internet, aucune de ces solutions. Cela signifie que nous sommes de retour de notre "confirmer" fonction 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 sur "Annuler"), on peut déclencher le "clic" ou "soumettre" en cas de nouveau lorsque l'utilisateur clique sur "OK". Pourquoi ne pas mettre un drapeau et de réagir en fonction de cet indicateur au sein de notre "confirmer" de la fonction?

Pour ma solution, j'ai opté pour l'utilisation de FastConfirm plutôt que d'un "modal" boîte de dialogue. 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 qu'il fait, je ne vois pas un moyen propre à tout. Si vous sentez que c'est trop d'aspérités, n'hésitez pas à lisser les ou de réécrire votre code de la façon que tout le monde 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;
}

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

Lorsque vous cliquez sur, le jq_confirm() va lancer le jQuery boîte de dialogue et revenir "false". Lorsque l'utilisateur clique sur "OK" puis jq_confirm() définit un indicateur, les appels de l'original de la souris (ou envoyer) événement, renvoie la valeur "true", alors unsets le drapeau dans le cas où vous voulez rester sur la même page.