title: How to create a simple pop-up div that loads an external page from an onclick event?
body: <p>Since I'm very new to jQuery I'm having some troubles with this issue. I'm having persons displayed in a table. When I click on one person I want a simple pop-up with some more information about that person. I can find example how to make a div pop-up from a click event, but not how to parse the id into the page that loads. And how to close the div if I click somewhere outside.</p>
  
  <p>I'm also looking for an option to clear the div when leaving it, so if you click another id, you wont see the old one until it is loaded.</p>
  
  <p>I found this example which suits my needs if I can get the pop-up to behave properly. Look at the demo <a href="http://hjalmarson.net/divtest/" rel="nofollow noreferrer">here.</a>. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;jQuery Tutorial - Pop-up div on hover&lt;/title&gt;
  &lt;style type="text/css"&gt;
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: #000 url(bg-texture.png) repeat;
      color: #dddddd;
    }
  
    h1, h3 {
      margin: 0;
      padding: 0;
      font-weight: normal;
    }
  
    a {
      color: #EB067B;
    }
  
    div#container {
      width: 580px;
      margin: 100px auto 0 auto;
      padding: 20px;
      background: #000;
      border: 1px solid #1a1a1a;
    }
  
    /* HOVER STYLES */
    div#pop-up {
      display: none;
      position: absolute;
      width: 280px;
      padding: 10px;
      background: #eeeeee;
      color: #000000;
      border: 1px solid #1a1a1a;
      font-size: 90%;
    }
  &lt;/style&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
    $(function() {
      var moveLeft = 20;
      var moveDown = 10;
  
      $('a#trigger').click(function(e) {
    $('#pop-up').load('page.php?id=$id');
        $('#pop-up').show();
    $("#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
        //.css('top', e.pageY + moveDown)
        //.css('left', e.pageX + moveLeft)
        //.appendTo('body');
      }, function() {
        $('div#pop-up').hide();
      });
  
  
    });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;
    &lt;h1&gt;jQuery Tutorial - Pop-up div on hover&lt;/h1&gt;
    &lt;p&gt;
      To show hidden div, simply hover your mouse over
      &lt;a href="#" id="trigger" value="999"&gt;this link&lt;/a&gt;.
    &lt;/p&gt;
  
    &lt;!-- HIDDEN / POP-UP DIV --&gt;
    &lt;div id="pop-up"&gt;pop-up&lt;/div&gt;
    &lt;br /&gt;
  
  what im trying to do&lt;br&gt;
  onclick - show div, and load name.php?id=999 into the div&lt;br&gt;
  keep the div open until one click outside the div, or if there is a exit button inside div.
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the file I created to include in the div:</p>
  
  <pre><code>&lt;?php
  
  if (isset($_GET['id'])) {
  $id = $_GET['id'];
  echo "You have clicked on id: $id";
  
  }
  
  ?&gt;
  </code></pre>