title: How to avoid creating the duplicate dialog boxes in jquery
body: <p>In my Footer Page </p>
  
  <pre><code>   Link 1 , Link 2  , Link 3 
  </code></pre>
  
  <p>Any of these links clicked will open a dialog box  with  data content and footer file.
  So ,Dialog will look like: </p>
  
  <pre><code>       Data 
         Link 1 , Link 2 , Link 3
  </code></pre>
  
  <p>And when I click on one of the link from Dialog it opens another dialog ,So this logic is going in to a infinite loop.</p>
  
  <p>Is there a way to avoid the duplication of this dialog boxes ? </p>
  
  <p>Open Function: </p>
  
  <pre><code>$(function() {
  
      $('#dialog').dialog('close');   
      // Trying it here but not sure if this is the right place  to do 
     // I want to close all dialog boxes before opening one 
  
      $( "#dialog" ).dialog({
          modal:true,
          height:600,
          width:600,
          my: "center",
          at: "center",
          of:window,
          resizable:false,
          closeOnEscape:false,
          open:function (event, ui) {
                   $('#dialog').load('/contact.jsp');
          }
      });
  
      $( "#dialog" ).dialog("option", "title", url);
  });
  </code></pre>
  
  <p>Still thinking about if I am placing  .close in the right place to begin with ? </p>