Question

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

我也在寻找一个选项来在离开时清除div，所以如果你点击另一个id，你就不会看到旧的ID，直到它被加载。

如果我能够让弹出窗口正常运行，我发现这个例子适合我的需要。看一下演示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>

这是我创建的文件包含在div中：

<?php

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

}

?>

Answer 1

id的问题在这一行：

$（ '＃弹出'）负载（ 'page.php文件ID = $ ID？'）;

将其更改为：

$（ '＃弹出'）负载（ “page.php文件ID =？” + ID）;

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

为了让它在下次清洁时，我只是在隐藏它时清空div的内容。

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

Answer 2

这就是我解决它的方式。点击下面的链接，将打开弹出窗口并将参数332添加到网址。

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

如何创建一个从onclick事件加载外部页面的简单弹出式div？

2 个答案: