title: How to reuse the html code in every html page?
body: <p>Let say I have the code as below:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &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;
  &lt;script src="jquery.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;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;a href="#" id="pop" &gt;PopUp&lt;/a&gt;
  &lt;br /&gt;
  &lt;form id="overlay_form" style="display:none"&gt;
  &lt;h2&gt; Put your contents here..&lt;/h2&gt;
  &lt;label&gt;Username: &lt;/label&gt;&lt;input type="text" name="username" /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;label&gt;Password: &lt;/label&gt;&lt;input type="text" name="password" /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;input type="button" value="Login" /&gt;
  &lt;a href="#" id="close" &gt;Close&lt;/a&gt;
  &lt;/form&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is a popup dialog example. Let say I want to use this dialog in all my webpages (a.html, b.html, c.html and etc), what is the best and easiest way to make the code above to be reusable? Because I think that to copy paste the 'overlay_form' into every html pages is not reasonable. </p>
  
  <p>I am still at the beginning level in Javascript, so to create a jQuery plugin for this is too hard for me. That's why I would like to seek for other ways to do it. Thanks.</p>