0

因为我对 jQuery 很陌生，所以我在这个问题上遇到了一些麻烦。我正在将人员显示在表格中。当我单击一个人时，我想要一个简单的弹出窗口，其中包含有关该人的更多信息。我可以找到如何从单击事件中弹出 div 的示例，但不能找到如何将 id 解析到加载的页面中。如果我点击外面的某个地方，如何关闭 div。

我还在寻找一个在离开时清除 div 的选项，所以如果你点击另一个 id，在加载之前你不会看到旧的。

如果我能让弹出窗口正常运行，我发现这个例子适合我的需要。看看这里的演示。.

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

}

?>
4

2 回答 2

0

id 的问题出在这一行：

$('#pop-up').load('page.php?id=$id');

将其更改为：

$('#pop-up').load("page.php?id="+id);

然后在某处设置您的 ID 变量。

为了让它下次干净，当你隐藏它时，我只是清空 div 的内容。

不确定是否要从头顶关闭它。

于 2012-10-05T21:22:48.820 回答
0

这就是我解决它的方法。单击下面的链接，将打开弹出窗口并将参数 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();
})
于 2012-12-29T13:34:46.153 回答