jquery - Définir les options dynamiquement

Question

Donc juste pour décrire ce que j'essaie de faire: J'essaie de créer un moyen facile de créer des messages modaux. Essayer de réduire la répétition du code (je ne veux pas créer de dialogues pour tout). Donc j'espère pouvoir juste définir le titre et le contenu et les boutons d'un modal puis appeler une fonction (doModal()).

Pour une raison quelconque, le code ci-dessous ne passe pas correctement les boutons (aucun bouton n'est affiché). Si je remplace simplement modal.buttons avec ceci:

{ 
       thisone: function(){ 
        alert('you clicked this one'); 
       } 
      } 

il travaillerait alors. Mais je ne peux pas avoir un moyen facile de définir les boutons, ce qui va à l'encontre de ce que j'essaie de faire.

Voici le code actuel:

var modal = $('<div id="modal"><p></p></div>'); 
function doModal() 
{ 
    var modal = $('<div id="modal"><p></p></div>'); 
    modal.text(modal.content); 
    modal.attr('title', modal.title); 
    modal.dialog('destroy'); 
    modal.dialog({ 
     modal:true, 
     resizable:false, 
     draggable:false, 
     buttons: modal.buttons 
    }); 
} 

$(document).ready(function(){ 
    modal.title = 'Are you sure?'; 
    modal.content = 'Are you sure? Deleting a product cannot be undone.'; 
    modal.buttons = { 
      thisone: function(){ 
       alert('you clicked this one'); 
      } 
     }; 
    doModal(); 
}); 

Answer 1

Vous définissez 2 fois modales, global et à l'intérieur doModal()

Dans la fonction que vous appelez sur document.ready() vous attribuez les boutons à la modal défini dans la portée globale. Mais à l'intérieur de doModal() existe également la variable locale définie modal, qui ne vous attribue pas les boutons.

Je définirais modales à l'intérieur du prêt() - fonction et le transmettre comme argument à doModal():

function doModal(modal) 
{ 
    modal.text(modal.content); 
    modal.attr('title', modal.title); 
    modal.dialog('destroy'); 
    modal.dialog({ 
     modal:true, 
     resizable:false, 
     draggable:false, 
     buttons: modal.buttons 
    }); 
} 

$(document).ready(function(){ 
    var modal = $('<div id="modal"><p></p></div>'); 
    modal.title = 'Are you sure?'; 
    modal.content = 'Are you sure? Deleting a product cannot be undone.'; 
    modal.buttons = { 
      thisone: function(){ 
       alert('you clicked this one'); 
      } 
     }; 
    doModal(modal); 
}); 

ou ne laisser passer que les options dynamiques à doModal():

function doModal(options) 
{ 
    var modal = $('<div id="modal"><p></p></div>'); 
    modal.text(options.content); 
    modal.attr('title', options.title); 
    modal.dialog('destroy'); 
    modal.dialog({ 
     modal:true, 
     resizable:false, 
     draggable:false, 
     buttons: options.buttons 
    }); 
} 

$(document).ready(function(){ 
    doModal(
      { 
       title :'Are you sure?', 
       content :'Are you sure? Deleting a product cannot be undone.', 
       buttons : { 
          thisone: function() 
            { 
             alert('you clicked this one'); 
            } 
         } 
      } 
      ); 
}); 

Answer 2

Je ne sais pas si cela vous aidera. J'ai créé une bibliothèque jQuery 'growl' qui affichait une boîte de dialogue modale. Il n'a pas le bouton, mais je pense que vous pouvez l'étendre. Voici un lien vers la bibliothèque.

http://blog.bobcravens.com/2010/08/making-the-web-growl-using-jquery/

Espérons que cela vous donne quelques idées et est utile.

Bob