0

次の名前の3つのPHPファイルがあります。

  1. インデックスページ
  2. 本
  3. ユーザー

インデックスページ

<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 という名前のポップアップを取得しました。

ポップアップが開かないという正確な場所を特定できません。

4

3 に答える 3

2

それ以外の：

$(".popup").colorbox({iframe:true, innerWidth:750, innerHeight:520});

試す：

$('.popup').live('click', function() {
  $.colorbox({href:$(this).attr('href'), open:true, iframe:true, innerWidth:750, innerHeight:520});
  return false;
});

または、うまくいかない場合:

$("body").on("click", ".popup", function() {
  $.fn.colorbox({href:$(this).attr('href'), open:true, iframe:true, innerWidth:750, innerHeight:520});
  return false;
});

それが少し役立つことを願っています

于 2012-11-10T03:29:19.923 に答える
1

あなたの問題は、リンクを動的に生成していることです。それを機能させるには、jquery live を使用する必要があります。ここにコードがあります

  $(function(){
                //Examples of how to assign the ColorBox event to elements
                $(".popup").live("click",function(){
                    $.colorbox({iframe:true, innerWidth:750, innerHeight:520});
                    return false;
                });

            });

ディンス

于 2012-11-10T03:35:54.100 に答える
0

href リンクをクリックする自然な実行をハイジャックする必要があるため... return false を追加する必要があります。これにより、基本的に、href をリンクのように扱わないようにブラウザーに指示します。

このようにポップアップ関数を変更すると、機能するはずです。もちろん、href opt の後にカラーボックス オプションをコンマ区切りで読み込んでください。

 $('.popup').click(function(){
   $.colorbox({href:$(this).attr('href'), iframe:true, innerWidth:750, innerHeight:520});
   return false;
  });

オプションとコードのクリーンアップを追加しました

于 2012-11-10T03:30:58.907 に答える