燈箱根據我所按的內容顯示內容

我想在一個while循環中創建一個燈箱，然後讓燈箱給我每個行的信息。

存在一個問題，因爲它會爲每個行生成lightbox，而且位置爲：絕對，我們只能看到結果中的最後一行。我不想看到最後一個，但我希望燈箱根據我點擊的行顯示信息。

下面是代碼：

的jQuery：

$(document).ready(function(){ 
    $('.lightbox').click(function(){ 
     $('.boxi').css('display','block'); 
    }); 
});

PHP：

$result = $db->query("SELECT * FROM destinations WHERE direction=1;"); 
    while ($rows = mysql_fetch_array($result)) { 
     $name = $rows['name']; 
     $table .= '<div class="destionations"> 
       <div class="name">Prej: <strong>'.$name.'</strong></div> 
       <table width="100%" class="extra" cellspacing="1" cellpadding="5" border="0" > 
       <tr class="bgC3" style="font-weight:bold"> 
        <td width="20"></td> 
        <td>Deri</td> 
        <td width="50">Çmimi</td> 
        '.managment::cmimet_e_caktuara($name).' 
       </tr> 
       </table> 
         <div class="buttoni"> 
         <a href="#" class="lightbox">test</a> 
         <div class="boxi">'.$name.'</div> 
          <form action="" method="POST">       
          <input type="text" name="new_city"> 
          <input type="hidden" name="prej" value="'.$name.'"> 
          <input type="submit" name="new_dest" value="Shto destinacionin"> 
          </form> 
         </div> 
       </div>'; 
    } 
}

來源

2011-06-12 TooCooL

它看起來像你想變成一個div到收藏夾？您可以嘗試調整.boxi上的當前CSS以顯示：無;並設置它的z-index前 - 然後調整javascript來是這樣的：

$('.lightbox').click(function(){ 
    $('.boxi').show(); 
    return false; 
});

你可以得到更復雜的與被點擊.lightbox時抓住下一個lightobx容器 - 我建議你檢查出fancybox.net上的插件Fancybox，這是我通常使用的。祝你好運！

來源

2011-06-12 02:43:55 DropTheNerd

的的fancybox是給我想要的結果，但我不喜歡很多CSS，JavaScript中，jQuery的文件鏈接到我的標籤我想使它簡單的話，我打算給它的風格與CSS但現在我只需要一個解決方案來顯示點擊鏈接的結果。 – TooCooL 2011-06-12 02:57:05

我只是有lightbox風格，它的顯示設置爲無。然後當你點擊鏈接顯示它的關聯燈箱 - 然後點擊燈箱上的任何地方關閉它。應該是一個非常小的方法，可以給你想要的。 – DropTheNerd 2011-06-12 03:04:22

那麼我只是編輯腳本，因爲我錯誤地發佈了它的jQuery部分，它的$（'。boxi'）.css（'display'，'block'）; 它與Z指數 – TooCooL 2011-06-12 03:12:19

$(document).ready(function(){ 
    $('.lightbox').click(function(){ 
     $('.boxi').css('display','block'); 
     $('.boxi').css('z-index','999999'); 
    }); 
});

我想這是因爲我認爲這將所選擇的塊給予較高的z-index，但沒有其真正原始，不會永遠工作。

我真的離jQuery太遠！

來源

2011-06-12 11:14:11 TooCooL

燈箱根據我所按的內容顯示內容

回答

相關問題