title: How to open different content in popups on clicking html links
body: <p>I am using  following code.I want to open different content on click. </p>
  
  <pre><code>&lt;style&gt;
  #overlay_form {
      position: absolute;
      border: 5px solid gray;
      padding: 10px;
      background: white;
      width: 270px;
      height: 190px;
  }
  #pop {
      display: block;
      border: 1px solid gray;
      width: 65px;
      text-align: center;
      padding: 6px;
      border-radius: 5px;
      text-decoration: none;
      margin: 0 auto;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Following javascript</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"&gt;&lt;/script&gt;    
  &lt;script type="text/javascript"&gt;     
  $(document).ready(function () {
      //open popup
      $("#pop").click(function () {
          $("#overlay_form").fadeIn(1000);
          positionPopup();
      });
  
      //close popup
      $("#close").click(function () {
          $("#overlay_form").fadeOut(500);
      });
  });
  
  //position the popup at the center of the page
  function positionPopup() {
      if (!$("#overlay_form").is(':visible')) {
          return;
      }
      $("#overlay_form").css({
          left: ($(window).width() - $('#overlay_form').width()) / 2,
          top: ($(window).width() - $('#overlay_form').width()) / 7,
          position: 'absolute'
      });
  }
  
  //maintain the popup at center of the page when browser resized
  $(window).bind('resize', positionPopup); 
  &lt;/script&gt;
  </code></pre>
  
  <p>I want to use  something like following html</p>
  
  <pre><code>&lt;html&gt;
  &lt;div&gt;
      &lt;a href="#" id="pop" &gt;Product Overview&lt;/a&gt;
      &lt;br/&gt;
          &lt;div id="overlay_form" style="display:none"&gt;
              &lt;a href="#" id="close" &gt;Close&lt;/a&gt;
          &lt;/div&gt;
  
      &lt;a href="#" id="pop" &gt;User Interface&lt;/a&gt;
  
          &lt;div id="overlay_form" style="display:none"&gt;
              &lt;a href="#" id="close" &gt;Close&lt;/a&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>On clicking different links I want  to open different content in pop up.</p>
  
  <p>Is is possible without repetition of whole java script with different ids.</p>
  
  <p>Thanks</p>