灯箱根据我按下的内容显示内容

Posted

技术标签:

【中文标题】灯箱根据我按下的内容显示内容【英文标题】:light box to show content according to what I have pressed 【发布时间】:2011-09-13 06:25:38 【问题描述】:

我的问题与 php、jQuery 和 CSS 有关。

我想在 while 循环中制作一个灯箱,然后让灯箱为我提供每一行的信息。

有一个问题,因为它为每一行制作灯箱,并且使用 position:absolute 我们只能看到结果中的最后一行。我不想看到最后一个,但我希望灯箱根据我单击的行向我显示信息。

代码如下:

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   class="extra" cellspacing="1" cellpadding="5" border="0" >
                <tr class="bgC3" style="font-weight:bold">
                    <td ></td>
                    <td>Deri</td>
                    <td >Ç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>';
    

【问题讨论】:

【参考方案1】:

您似乎想将一个 div 变成一个灯箱?您可以尝试在 .boxi 上调整当前 CSS 以显示:无;并在其上设置一个 z-index - 然后将您的 javascript 调整为如下所示:

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

当单击 .lightbox 时,抓取下一个 lightobx 容器可能会变得更加复杂 - 我建议您在 fancybox.net 上查看插件 Fancybox,这是我通常使用的插件。祝你好运!

【讨论】:

fancybox 给出了我想要的结果,但我不喜欢将很多 css、javascript、jquery 文件链接到我的 标签我想让它变得简单,然后我将用 css 给它样式,但现在我只需要一个解决方案来显示点击链接的结果。 我只需设置灯箱样式并将其显示设置为无。然后,当您单击该链接时,显示它是关联的灯箱 - 然后单击灯箱上的任意位置将其关闭。应该是一种非常简单的方法,可以满足您的需求。 好吧,我刚刚编辑了脚本,因为我把它贴错了 jquery 部分,它的 $('.boxi').css('display','block');它是 z-index【参考方案2】:
$(document).ready(function()
    $('.lightbox').click(function()
        $('.boxi').css('display','block');
        $('.boxi').css('z-index','999999');
    );
);

我尝试了这个,因为我认为它会给选定的块提供更高的 z-index,但不是它真正原始的并且永远不会工作。

我真的离jQuery太远了!

【讨论】:

以上是关于灯箱根据我按下的内容显示内容的主要内容,如果未能解决你的问题,请参考以下文章

获取 UIButton 按下的内容

如何让按钮根据按下的行显示不同的视频?

我怎样才能最小化和恢复灯箱上的功能..?

在初始化程序中加载 webview 内容

根据按下的按钮更改表格视图标题

Tkinter 退出时不更新