3

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

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

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

现在我需要链接(在 location.href 中指定)在一个花式框 iframe 中打开。

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

我对所有建议持开放态度......即使使用 div 以外的元素,或使用不同的 jquery iframe 灯箱。

谢谢

蒂姆·莫尔

4

3 回答 3

21

这演示了如何在不需要<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'
    });
});

框架

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

$('#menuitem').click(function () {
    $.fancybox({
        type: 'iframe',
        href: 'http://www.abc123.com'
    });
});
于 2012-10-17T06:47:38.977 回答
1

a)您可以将其他项目放在 a 标签内,它会起作用,但它是无语义的。

b)

  1. 将您的 iframe 放入隐藏的 div 中(或点击 ajax 将其放入)
  2. 做 $('.menuitem').click(hiddendiv.fancyb...().show())

就我个人而言,我总是避免使用 onclick="" 在外部 js 文件中维护代码要容易得多

于 2010-03-18T09:45:03.780 回答
0

我正在做同样的事情并想动态调用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>

这是一种更快更简单的方法;我找到了,希望对某人有所帮助!快乐编码!

于 2012-07-04T15:49:26.030 回答