0

私はjQueryを初めて使用するため、この問題で問題が発生しています。テーブルに人を並べています。ある人をクリックすると、その人に関する詳細情報を含む簡単なポップアップが表示されます。クリックイベントからdivポップアップを作成する方法の例を見つけることができますが、ロードするページにIDを解析する方法は見つかりません。そして、外のどこかをクリックした場合にdivを閉じる方法。

divを離れるときにクリアするオプションも探しているので、別のIDをクリックすると、ロードされるまで古い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 に答える