Home/ Questions/Q 9071425
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T17:54:36+00:00

Since I’m very new to jQuery I’m having some troubles with this issue. I’m

  • 0

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.

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.

I found this example which suits my needs if I can get the pop-up to behave properly. Look at the demo here.. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Tutorial - Pop-up div on hover</title>
<style type="text/css">
  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%;
  }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">

  $(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();
    });


  });
</script>
</head>
<body>
<div id="container">
  <h1>jQuery Tutorial - Pop-up div on hover</h1>
  <p>
    To show hidden div, simply hover your mouse over
    <a href="#" id="trigger" value="999">this link</a>.
  </p>

  <!-- HIDDEN / POP-UP DIV -->
  <div id="pop-up">pop-up</div>
  <br />

what im trying to do<br>
onclick - show div, and load name.php?id=999 into the div<br>
keep the div open until one click outside the div, or if there is a exit button inside div.
</div>
</body>
</html>

This is the file I created to include in the div:

<?php

if (isset($_GET['id'])) {
$id = $_GET['id'];
echo "You have clicked on id: $id";

}

?>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is how I solved it. Clicking on the link below, will open the pop-up and add the parameter 332 to the url.

    <a href="#" id="332">this link has id 332, but is just an example</a>.


$("body").click(function(e) {

    $.ajaxSetup({
    cache: false 
    }); 

    //get the value from the clicked DIV
    var idName = e.target.id;

    //pass the id from the div to the URL by adding idName
    var urlToLoad = 'page.php?groupId=' + idName

    //load the url with the passed parameter
    $('#popUp').load(urlToLoad);
    $('#popUp').show();
})
    • 0