title: jquery modal with dynamic content
body: <p>ok so I'm using the code below to pull up a modal window whenever the user clicks on the link shown. Everything works fine but I need to also pass a variable to the page that is loaded in modal window and I'm not sure how to do this. The link would obviously change to :</p>
  
  <pre><code>&lt;a id="testmodal" href="modal.php?id=$id"&gt;Test&lt;/a&gt;
  </code></pre>
  
  <p>But what modification need to be made to the jquery so that modal_window.php receives the $id variable when it is loaded in the modal window? Any help would be awesome...thanks!</p>
  
  <pre><code>                    &lt;style&gt;
          body{
              margin:0; 
              padding:0;
          }
  
          #overlay {
              position:fixed; 
              top:0;
              left:0;
              width:100%;
              height:100%;
              background:#000;
              opacity:0.5;
              filter:alpha(opacity=50);
          }
  
          #modal {
              position:absolute;
              background:url(tint20.png) 0 0 repeat;
              background:rgba(0,0,0,0.2);
              border-radius:14px;
              padding:8px;
  
  
          }
  
          #content {
              border-radius:8px;
              background:#fff;
                              padding:20px;
  
          }
  
          #close {
              position:absolute;
              background:url(close.png) 0 0 no-repeat;
              width:24px;
              height:27px;
              display:block;
              text-indent:-9999px;
              top:-7px;
              right:-7px;
          }
      &lt;/style&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;  
              &lt;/script&gt;
      &lt;script&gt;
          var modal = (function(){
              var 
              method = {},
              $overlay,
              $modal,
              $content,
              $close;
  
              // Center the modal in the viewport
              method.center = function () {
                  var top, left;
  
                  top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
                  left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
  
                  $modal.css({
                      top:top + $(window).scrollTop(), 
                      left:left + $(window).scrollLeft()
                  });
              };
  
              // Open the modal
              method.open = function (settings) {
                  $content.append(settings.content);
  
                  $modal.css({
                      width: settings.width || 'auto', 
                      height: settings.height || 'auto'
                  })
  
                  method.center();
  
                  $(window).bind('resize.modal', method.center);
  
                  $modal.show();
                  $overlay.show();
              };
  
              // Close the modal
              method.close = function () {
                  $modal.hide();
                  $overlay.hide();
                  $content.empty();
                  $(window).unbind('resize.modal');
              };
  
              // Generate the HTML and add it to the document
              $overlay = $('&lt;div id="overlay"&gt;&lt;/div&gt;');
              $modal = $('&lt;div id="modal"&gt;&lt;/div&gt;');
              $content = $('&lt;div id="content"&gt;&lt;/div&gt;');
              $close = $('&lt;a id="close" href="#"&gt;close&lt;/a&gt;');
  
              $modal.hide();
              $overlay.hide();
              $modal.append($content, $close);
  
              $(document).ready(function(){
                  $('body').append($overlay, 
                                $modal);                      
              });
  
              $close.click(function(e){
                  e.preventDefault();
                  method.close();
              });
  
              return method;
          }());
  
          // Wait until the DOM has loaded before querying the document
          $(document).ready(function(){
  
  
  
  
              $('a#testmodal').click(function(e){
                  $.get('modal_window.php', function(data){
                              modal.open({content: data});});
                  e.preventDefault();
              });
  
  
  
          });
  
  
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;a id="testmodal" href="modal.php"&gt;Test&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>