Using a jQuery-UI Dialog in Meteor in Four Easy Steps

jQuery-UI Eating Contest

Using a jQuery-UI modal dialog in your Meteor app is as easy as the proverbial pie (eating it, that is, not making it, which is decidedly more difficult); simply follow these steps:

0. In the console, enter "meteor add linto:jquery-ui" to install the package.
1. Add a "hide" CSS class:

   .hide {
     visibility: hidden;
     display: none;
   }

2. Add some HTML to the Template where the Dialog should display, hiding it by default, such as:

   <template name="platypus"> <div id="duckbill" 
   name="duckbill"> <h2>Duckbilled Platypi of the World Unite!</h2> 
   <img alt="platypus image" height="275" id="imgPlatypusParty" 
   name="imgPlatypusParty" src="images/dplat.png" width="350" />
   </div> <div class="hide" id="dialog" title="Basic dialog"> 
   <p>Put whatever you want in here.</p> </div> </template>

3. In response to some event, unhide the div and call dialog() on it, such as:

   Template.platypus.events({
     'click #imgPostTravelBottom': function() {
       $( "#dialog" ).removeClass('hide');
       $( "#dialog" ).dialog(); }
   });

And that's all there is to it! It's almost as easy as falling off a log, and is as easy as pie, which is "funner."