Question

这个问题似乎已被问到很多，但我还没有看到一个有效的答案。

所以我有一个像这样工作的div：

<div onclick="location.href='http://www.abc123.com';" class="menuitem">
</div>

现在我需要在fancybox iframe中打开链接（在location.href中指定）。

我很想使用 A 元素，但这个Div包含其他项目，所以我认为不行。

我对所有建议持开放态度......甚至使用除div之外的元素，或者使用不同的jquery iframe灯箱。

由于

蒂姆莫尔

Answer 1

这演示了如何在不需要<a href>链接元素的情况下使用fancybox。

内联（1.3.4）：

<div id="menuitem" class="menuitem"></div>

<div style="display:none;">
    <div id="dialogContent">
    </div>
</div>

$('#menuitem').click(function() {
    $.fancybox({
        'type': 'inline',
        'content': '#dialogContent'
    });
});

内联（2.1.5）：

<div id="menuitem" class="menuitem"></div>

<div style="display:none;">
    <div id="dialogContent">
    </div>
</div>

$('#menuitem').click(function() {
    $.fancybox({
        'type': 'inline',
        'href': '#dialogContent'
    });
});

<强> I帧：

<div id="menuitem" class="menuitem"></div>

$('#menuitem').click(function () {
    $.fancybox({
        type: 'iframe',
        href: 'http://www.abc123.com'
    });
});

Answer 2

a）你可以把其他物品放在一个标签内，它会起作用但是它没有语义。

b）

将您的iframe放入隐藏的div中（或点击后点击ajax）
do $（'。menuitem'）。click（hiddendiv.fancyb ...（）。show（））

我个人总是避免使用onclick =“”在外部js文件中维护代码要容易得多

Answer 3

我正在做同样的事情，也想动态调用fancybox 我知道它可能不太理想，但这就是我所做的（我使用jquery btw）：

JS：

jQuery(document).ready(function($){
    $(".fancybox").fancybox();
    $("form").submit(function(){
        $(".fancybox").trigger("click");
        return false;
    });
});

HTML：

<a href="#div_id" class="fancybox"></a>
<div style="display:none;">
     <div id="div_id">
         This will show up in my fancybox
     </div>
</div>

这是一种更快捷的方式;我找到了，希望它对某人有帮助！快乐的编码！

从DIV onclick（）触发FancyBox;

3 个答案: