Comment puis-je avoir popup de confirmation dynamique en utilisant le modal

Question

J'utilise un modèle simple qui est un morceau de code très soigné, mais j'ai une exigence que je ne peux pas comprendre.

http://www.ericmmartin.com/simplemodal/

mon cas d'utilisation est la troisième option où je veux une « confirmation Popup » après un utilisateur clique sur une action. Le problème est que dans l'exemple, le message est codé en dur dans le fichier js.

Je dois pouvoir transmettre ce message ainsi que le lien associé aux boutons "Oui" et "Non".

Quelqu'un at-il fait quelque chose de similaire.

Answer 1

regardant la source de la page vous indique tout ce que vous devez savoir.

<!-- Confirm --> 
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' /> 
<script src='js/confirm.js' type='text/javascript'></script> 

et

<div id='confirmDialog'><h2>Confirm Override</h2> 

    <p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of <code>onShow</code> as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p> 
    <form action='download/' method='post'> 
     <input type='button' name='confirm' value='Demo' class='confirm demo'/><input type='button' name='download' value='Download' class='demo'/> 
     <input type='hidden' name='demo' value='confirm'/> 
    </form> 
</div> 
<div id='confirm' style='display:none'> 

    <a href='#' title='Close' class='modalCloseX simplemodal-close'>x</a> 
    <div class='header'><span>Confirm</span></div> 
    <p class='message'></p> 
    <div class='buttons'> 
     <div class='no simplemodal-close'>No</div><div class='yes'>Yes</div> 
    </div> 
</div> 

Au-dessus, nous pouvons voir clairement que le message est dans le code HTML, et non dans le javascript du tout. Et si nous regardons ensuite la source JS de confirm.js, tout est prévu pour vous sur la façon de l'initialiser/le déclencher.

/* 
* SimpleModal Confirm Modal Dialog 
* http://www.ericmmartin.com/projects/simplemodal/ 
* http://code.google.com/p/simplemodal/ 
* 
* Copyright (c) 2009 Eric Martin - http://ericmmartin.com 
* 
* Licensed under the MIT license: 
* http://www.opensource.org/licenses/mit-license.php 
* 
* Revision: $Id: confirm.js 185 2009-02-09 21:51:12Z emartin24 $ 
* 
*/ 

$(document).ready(function() { 
    $('#confirmDialog input.confirm, #confirmDialog a.confirm').click(function (e) { 
     e.preventDefault(); 

     // example of calling the confirm function 
     // you must use a callback function to perform the "yes" action 
     confirm("Continue to the SimpleModal Project page?", function() { 
      window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/'; 
     }); 
    }); 
}); 

function confirm(message, callback) { 
    $('#confirm').modal({ 
     close:false, 
     position: ["20%",], 
     overlayId:'confirmModalOverlay', 
     containerId:'confirmModalContainer', 
     onShow: function (dialog) { 
      dialog.data.find('.message').append(message); 

      // if the user clicks "yes" 
      dialog.data.find('.yes').click(function() { 
       // call the callback 
       if ($.isFunction(callback)) { 
        callback.apply(); 
       } 
       // close the dialog 
       $.modal.close(); 
      }); 
     } 
    }); 
} 

Answer 2

Je recommanderais BlockUI qui est ce que j'utilise. Avec ce plugin, il utilise une valeur <div> existante pour afficher le message. Dans le cas où la boîte de dialogue se déclenche, vous pouvez utiliser jQuery pour modifier le message et lier le texte via une manipulation DOM normale avant de montrer le <div> comme votre application l'exige.

jQuery BlockUI Plugin - Dialog Example

EDIT - par le premier commentaire ci-dessous.

<script type="text/javascript"> 
$(document).ready(function() { 

    $('#test').click(function() { 
     $.blockUI({ message: $('#question'), css: { width: '275px' } }); 
    }); 

    $('#yes').click(function() { 
     // Remove the UI block. 
     $.unblockUI(); 
     // Or you could use window.open 
     window.location = "http://www.google.com"; 
    }); 

    $('#no').click(function() { 
     $.unblockUI(); 
     return false; 
    }); 
}); 

Answer 3

Le code donné dans confirm.js contient deux définitions de méthode. L'une est une méthode générique appelée confirm, qui créera votre popup modal avec le message que vous voulez afficher. Vous devez utiliser cette méthode chaque fois que vous voulez créer le popup modal.

confirm("Are you sure you want to delete this item?", function() { 
    //Here you will write the code that will handle the click of the OK button. 
}); 

Ici, le deuxième argument est une fonction (cela fonctionne presque comme un délégué en C#). Qu'est-ce qui se passera est que la fonction confirm affichera une boîte de dialogue contenant votre message, et lorsque l'utilisateur clique sur n'importe quel bouton, la fonction anonyme passée que le second argument sera invoqué. Vous pouvez également écrire une fonction « normale » et le transmettre comme deuxième argument confirm -

function callbackHandler() { 
    //Here you will write the code that will handle the click of the OK button. 
} 

confirm("Are you sure you want to delete this item?", callbackHandler); 

Votre fonction sera invoquée par ce morceau de code -

// if the user clicks "yes" 
dialog.data.find('.yes').click(function() { 
    // call the callback 
    if ($.isFunction(callback)) { callback.apply(); } 
    // close the dialog 
    $.modal.close(); 
});