title: How to reuse same jQuery ui dialog box code for different popup
body: <p>I want to use the following jQuery dialog box for to open different popup box</p>
  
  <pre><code>&lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="js/jquery-1.3.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              $("#pop101").dialog({
                  autoOpen: false,
                  draggable: true,
                  title: "Add New Person",
                  open: function (type, data) {
                       $(this).parent().appendTo("form");
                  }
              });
          });
          function showDialog(id) {
              $('#' + id).dialog("open");
          }
          function closeDialog(id) {
              $('#' + id).dialog("close");
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type="button" onclick="showDialog('pop101');" value="Popup1" /&gt;
      &lt;input type="button" onclick="showDialog('pop102');" value="Popup2" /&gt;
      &lt;input type="button" onclick="showDialog('pop103');" value="Popup3" /&gt;
      &lt;input type="button" onclick="showpopup('pop104');" value="Popup4" /&gt;
      &lt;div style="background: green" id='pop101'&gt;
      &lt;/div&gt;
      &lt;div style="background: orange" id='pop102'&gt;
      &lt;/div&gt;
      &lt;div style="background: blue" id='pop103'&gt;
      &lt;/div&gt;
      &lt;div style="background: skyblue" id='dialog1'&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>There are 4 buttons popup1,2,3,4 , when i click on them, popup should display using above code, how?</p>