Как создать простой всплывающий элемент div, который загружает внешнюю страницу из события onclick?

Так как я очень плохо знаком с jquery, у меня возникли некоторые проблемы с этим вопросом.

У меня люди отображаются в таблице. Когда я нажимаю на одного человека, я хочу всплывающее окно с дополнительной информацией об этом человеке.

Я могу найти пример того, как сделать div всплывающим из события щелчка, но не как разобрать идентификатор в загрузочную страницу. И как закрыть div, если я нажму где-нибудь снаружи.

Я также ищу возможность очистить div при выходе из него, так что если вы щелкнете по другому идентификатору, вы не увидите старый, пока он не будет загружен.

Я нашел этот пример, который соответствует моим потребностям, если я могу заставить всплывающее окно вести себя правильно. Посмотрите на демо здесь.

<!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>

Это файл, который я создал, чтобы включить в div.

<?php

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

}

?>
Источник

2 ответа

Решение

Вот как я это решил. Нажав на ссылку ниже, откроется всплывающее окно и добавьте параметр 332 в 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();
})
Источник

Проблема с идентификатором находится в этой строке:

$ ('# Всплывающий') нагрузки ('page.php ID = $ идентификатор?).

Измените это на:

. $ ('# Всплывающий') нагрузки ("page.php ID =?" + Идентификатор);

А затем установите вашу переменную ID где-нибудь.

Чтобы он был чистым в следующий раз, я бы просто опустошил содержимое div, когда вы его скрываете.

Не уверен насчет того, чтобы закрыть его на макушке.

Источник
Другие вопросы по тегам