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

Question

Regarda autour de un peu, et n'arrive pas à trouver un JQuery solution (peut-être que c'est juste une limitation de JavaScript) pour cela:

<a href="somelink.php" 
   onclick="return confirm('Go to somelink.php?');">Click Here</a>

Dans l'exemple ci-dessus, lorsqu'un utilisateur clique sur le lien, il ne va pas à ses href si l'utilisateur clique sur OK dans la boîte de confirmation.

Ce que j'essaie de faire est d'obtenir un look plus moderne à l'aide d'un popup div. Peut-être quelque chose comme ceci:

<a href="somelink.php" 
   onclick="return jq_confirm('Go to somelink.php?');">Click Here</a>

(Où jq_confirm est une coutume JQuery confirmer fonction qui affiche une belle div avec une réponse OUI/NON ou OK/CANCEL paire).

Cependant, je n'arrive pas à trouver une telle chose.

J'ai regardé quelques widget JQuery bibliothèques, etc, qui offrent des fonctionnalités similaires, mais aucun n'arrivera à attendre la réponse de l'utilisateur (au moins, pas dans le scénario décrit ci-dessus), mais au lieu de cela ils ont juste continuer et prendre l'utilisateur pour le lien (ou d'exécuter un JavaScript intégré dans le href=" morceau de la liaison). Je suppose que c'est parce que tandis que vous pouvez attacher à une fonction de rappel pour plusieurs de ces widgets pour retourner une valeur vrai/faux, le onclick de l'événement ne fait pas attendre une réponse (rappels sont asynchrones), ainsi à l'encontre de l'objectif de la boîte de confirmation.

Ce dont j'ai besoin est le même genre de halte-tous-javascript (modal) fonctionnalités que le défaut de confirmer() commande offre. Est-ce possible dans JQuery (ou même en JavaScript)?

Comme je ne suis pas un expert en JavaScript, ni en JQuery, je reporte à vous les gourous de là-bas. Tout JQuery (ou même pur JavaScript) la solution est la bienvenue (si possible).

Merci

Answer 1

J'ai juste eu à résoudre le même problème. Je me suis retrouvé à l'aide de l' dialog widget de JQuery UI. J'ai été en mesure de mettre en œuvre sans l'aide de rappels avec la mise en garde que l' dialog doit être partiellement initialisé dans l' 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>

Answer 2

Découvrez http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/

Ils ont une bonne variété de modal-boîtes pour JQuery.

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

Une boîte de dialogue modale de remplacer JavaScript confirmer la fonction. Illustre l'utilisation de onShow ainsi que comment faire pour afficher une boîte de dialogue modale de la confirmation de la place de la valeur par défaut JavaScript boîte de dialogue de confirmation.

Answer 3

Avez-vous vu la boîte de dialogue Modale de jQuery sur le site de l'interface utilisateur de jQuery ?

• Démo du dialogue de confirmation modale

Answer 4

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

Même si l'article est orientée vers l'ASP.Net il peut être facilement adapté à php. Il s'appuie sur la prévention de la sur avec un return false et lorsque l'utilisateur clique sur "OK" ou "OUI" ou quoi, avez-vous; le lien ou le bouton est tout simplement cliqué de 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-le et laissez-moi savoir ce que vous en pensez. J'espère que cela résout votre problème.