How to Make Multiple Content Popups Using Jquery

[esoftwall]

how to open the multi content pop up's ,below code showing button1 content only when i cleick the second button top

<div class="buttons">  
   <button type="button" id="btnShowSimple" value="Email" class="positive" >
    <img src="../css/bmail.png" alt="email"/> 
    Email
   </button>
<button type="button" id="btnShowShare" value="Share" class="positive" >
    <img src="../css/share.jpg" alt="Share"/> 
Share
   </button>
</div>
 <div id="model">
<div id="output"></div>  
<div id="overlay" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
   <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
  <tr>
     <td class="web_dialog_title">Email this Article</td>
     <td class="web_dialog_title align_right">
        <a href="#" id="btnClose">Close</a>
     </td>
  </tr>

  <tr>
<td colspan="2" style="text-align: center;">

button 1

</td></tr></table>
</div></div>

<div id="model1">

<div id="output"></div>  
<div id="overlay" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
   <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
  <tr>
     <td class="web_dialog_title">Email this</td>
     <td class="web_dialog_title align_right">
        <a href="#" id="btnClose">Close</a>
     </td>
  </tr>

  <tr>
<td colspan="2" style="text-align: center;">

    button2 

            </td>
  </tr>  </table></div></div>



<style type="text/css">


.web_dialog_overlay
{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   background: #000000;
   opacity: .15;
   filter: alpha(opacity=15);
   -moz-opacity: .15;
   z-index: 101;
   display: none;
}
.web_dialog
{
   display: none;
   position: fixed;
   width: 450px;
   height: 400px;
   top: 50%;
   left: 50%;
   margin-left: -240px;
   margin-top: -200px;
   background-color: #ffffff;
   border: 2px solid #336699;
   padding: 0px;
   z-index: 102;
       font-family: Verdana;
       font-size: 10pt;
    }
.web_dialog_title
{
   border-bottom: solid 2px #336699;
       background-color: #336699;
   padding: 4px;
   color: White;
   font-weight:bold;
}
.web_dialog_title a
{
   color: White;
   text-decoration: none;
}
.align_right
{
   text-align: right;
}




</style>
<script src="../js/jquery-1.4.3.min.js" type="text/javascript"></script>

<script type="text/javascript">

   $(document).ready(function ()
   {
      $("#btnShowSimple").click(function (e)
      {
         ShowDialog(false);
        $("#model").reveal();
     e.preventDefault();
  });

   $("#btnShowShare").click(function (e)
  {
     ShowDialog(false);
         $("#model1");

         e.preventDefault();
      });

  $("#btnClose").click(function (e)
  {
     HideDialog();
     e.preventDefault();

  });

   $(document).keyup(function(e) {
  if (e.keyCode == 27) {
         HideDialog(); }
});

   });

   function ShowDialog(modal)
   {
  $("#overlay").show();
  $("#dialog").fadeIn(300);

  if (modal)
  {
     $("#overlay").unbind("click");
  }
  else
  {
     $("#overlay").click(function (e)
     {
        HideDialog();
     });
  }
   }

   function HideDialog()
   {
      $("#overlay").hide();
  $("#dialog").fadeOut(300);
   } 



</script>

[moyk]

Please correctly formulate your questions, format your code and we might be able to help you.