Comment appeler le plugin osem simplemodal par programmation?

Question

J'ai implémenté le plugin simplemodal pour JQuery. Très joli btw! En cas de problème, j'ai une liste de liens générés à partir d'une base de données, lorsque j'en clique un, je fais un appel «load» et j'ajoute les résultats à mon div osx-modal-content. Comment puis-je appeler le plugin osx après la fin de mon chargement? Si j'ajoute class = osx à mon href, le modal s'ouvre avant que le contenu ne pénètre dans la div.

Ma fonction charge html:

function loadContent(id) { 
     $("#osx-modal-dialog").load("Item.cfm?ID="+id+""); 
     // call OSX here???? 
     $('#osx-modal-dialog').modal(); 
    } 

Mon DIV:

<div id="osx-modal-dialog"> 
    <div id="osx-modal-content"> 
<div id="osx-modal-title">Title</div> 
<div id="osx-modal-data"> 
    <h2>Summary</h2> 
    <p>Description</p> 
    <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p> 
</div> 
    </div> 
</div> 

Actuellement, le plugin MacOSX est à la recherche d'entrée ou un événement de clic. Je ne suis pas sûr de savoir comment écrire un événement "click" après mon chargement. Ou peut-être existe-t-il un meilleur moyen d'appeler le plugin.

Comprend:

Answer 1

Voici ce que je ferais:

Modifier le contenu OSX (j'ai enlevé la majeure partie du contenu et ajouté un espace réservé):

<div id="osx-modal-content"> 
               <div id="osx-modal-title">OSX Style Modal Dialog</div> 
               <div id="osx-modal-data"> 
                       <div id="osx-data-placeholder"></div> 
                       <p><button class="simplemodal-close">Close</button> <span>(or press 
ESC or click the overlay)</span></p> 
               </div> 
       </div> 

Votre fonction LoadContent:

function loadContent(id) { 
               var d = $('#osx-modal-content'); 

               // load your page 
               $.get("Item.cfm?ID=" + id, function(data) { 

                       // replace the placeholder with the results 
                       $('#osx-data-placeholder', d[0]).html(data); 

                       // open the osx modal 
                       d.modal({ 
                               overlayId: 'osx-overlay', 
                               containerId: 'osx-container', 
                               closeHTML: '<div class="close"><a href="#" 
class="simplemodal-close">x</a></div>', 
                               minHeight:80, 
                               opacity:65, 
                               position:['0',], 
                               overlayClose:true, 
                               onOpen:OSX.open, 
                               onClose:OSX.close 
                       }); 
               }); 
       } 

Je ne l'ai pas testé, mais je suis sûr que cela devrait faire l'affaire.

-Eric

Answer 2

La méthode de charge a un paramètre de rappel où vous pouvez fournir une fonction qui sera exécutée lorsque la charge est terminée. Utilisez ce rappel pour déclencher le dialogue.

function loadContent(id) { 
    $("#osx-modal-dialog").load("Item.cfm?ID="+id+"", function() { 
     $('input.show-info').unbind('click') // remove any existing handlers 
          .click(function() { // bind click on button to show dialog 
      $('#osx-modal-dialog').modal(); 
     }); 
    }); 
} 

Mise à jour: Je l'ai mis à jour cela pour montrer comment ajouter un gestionnaire de clic dans le rappel de la charge(), mais je ne sais pas quel événement vous voulez gérer, ni quel élément l'événement est déclenché. Je suppose que vous voulez montrer la boîte de dialogue lorsque vous cliquez sur un bouton avec la classe "show-info".