title: Multiple JQuery UI Dialog's on a single page
body: <p>On a single page, I wish to use JQuery UI's dialog box to display a bunch of different dialog boxes so that users can confirm they've read a particular on screen message as well as display some other content.</p>
  
  <p>I have a server side PHP foreach() that generates the messages and places each one inside of a <code>&lt;div class="mod_message_short"&gt;</code> with a number of child divs for layout/formatting including a <code>&lt;div class="mod_message_modal"&gt;</code> which contains the content for the dialog box pertaining to that particular message.</p>
  
  <p>Is there a way of declaring <code>autoOpen:false</code> on all of the .mod_message_modal elements  without having to declare them individually (with an unique id instead of a class that encapsulates them all)?</p>
  
  <p>The following is what I've got so far:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function(){
      $('.mod_message_modal').dialog({
          autoOpen:false
      });
  
      $('.mod_message_readmore').click(function(e){
          $(".mod_message_short[data-messageid='" + $(this).parents('.mod_message_short').data('messageid') + "']").find('.mod_message_modal').dialog("open");
          e.preventDefault();
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Unfortunately this doesn't work because .dialog() removes all the elements from the DOM so when I go to try and find them to open them individually on a mouse click event, I can't.</p>
  
  <p>I expect the solution to this would be declaring these individually, but I think this will generate a bunch of javascript that may be unnecessary.</p>
  
  <p>It seems like a similar problem to the one posted <a href="https://stackoverflow.com/questions/10536710/jquery-ui-multiple-dialogs-generated-from-php">here</a>  with no useful answer for my particular issue.</p>
  
  <p>Any ideas? Thanks!</p>