次の名前の3つのPHPファイルがあります。
- インデックスページ
- 本
- ユーザー
インデックスページ
<link href="colorbox.css" type="text/css" rel="stylesheet" media="all" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.colorbox.js"></script>
<script type="text/javascript">
function bookRetr(str)
{
if (str=="") {
document.getElementById("more-info").innerHTML="";
return;
}
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("more-info").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","showbook.php?id="+str,true);
xmlhttp.send();
}
</script>
<script>
$(document).ready(function() {
//Examples of how to assign the ColorBox event to elements
$(".popup").colorbox({iframe:true, innerWidth:750, innerHeight:520});
});
</script>
<div id='$bookid' onClick="bookRetr(this.id)></div>
<div id='more-info'></div>
bookshow.php
$bookid = $_GET['id'];
$query = mysql_query("SELECT * FROM bookdatabase WHERE ID='{$bookid}'");
$fetch = mysql_fetch_array($query);
$user = $fetch['userID'];
echo "<a href='showuser?id=$user' class='popup'>My name is X</a>";
divをクリックするとブックショーのエコー部分がインデックスページに表示されますが、My name is Xをクリックすると新しいページが開きますが、実際にはポップアップを開くはずです。colorbox plugin という名前のポップアップを取得しました。
ポップアップが開かないという正確な場所を特定できません。