jQuery 从 DIV onclick() 触发 FancyBox；
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2466794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Triggering FancyBox from a DIV onclick();
提问by Tim
This question seems to have been asked a lot, but I haven't seen an answer that works.
这个问题似乎被问了很多，但我还没有看到有效的答案。
So I have a div that works like this:
所以我有一个像这样工作的div：
<div onclick="location.href='http://www.abc123.com';" class="menuitem">
</div>
Now I need the link (specified in location.href) to open up in a fancybox iframe.
现在我需要链接（在location.href 中指定）在fancybox iframe 中打开。
I would love to use an Aelement but this Div holds other items so I don't think I can.
我很想使用A元素，但这个 Div 包含其他项目，所以我认为我不能。
I am open to all suggestions... even using elements other than divs, or using a different jquery iframe lightbox.
我对所有建议持开放态度……甚至使用除 div 以外的元素，或使用不同的 jquery iframe 灯箱。
Thanks
谢谢
Tim Mohr
蒂姆·莫尔
采纳答案by Haroldo
a) you can put other items inside an a tag, it will work but it's unsemantic.
a) 您可以将其他项目放在 a 标签中，它可以工作，但没有语义。
b)
b)
- put your iframe in a hidden div (or ajax it in on click)
- the do $('.menuitem').click(hiddendiv.fancyb...().show())
- 将您的 iframe 放在隐藏的 div 中（或单击 ajax 将其放入）
- do $('.menuitem').click(hiddendiv.fancyb...().show())
Personally i would always avoid using onclick="" it's much easier to maintain your code in an external js file
就我个人而言，我总是避免使用 onclick="" 在外部 js 文件中维护代码要容易得多
回答by Ronald
This demonstrates how to use fancybox without requiring the <a href>link element.
这演示了如何在不需要<a href>链接元素的情况下使用fancybox 。
Inline (1.3.4):
内联 (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'
});
});
Inline (2.1.5):
内联（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'
});
});
Iframe:
框架：
<div id="menuitem" class="menuitem"></div>
$('#menuitem').click(function () {
$.fancybox({
type: 'iframe',
href: 'http://www.abc123.com'
});
});
回答by pythonian29033
I was doing the same thing and wanted to invoke fancybox dynamically also I know it might not be ideal, but this is what i did (I use jquery btw):
我正在做同样的事情并且想动态调用fancybox我也知道它可能不理想，但这就是我所做的（我使用jquery btw）：
JS:
JS：
jQuery(document).ready(function($){
$(".fancybox").fancybox();
$("form").submit(function(){
$(".fancybox").trigger("click");
return false;
});
});
HTML:
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>
it's a quicker easier way; I found, hope it helps someone! happy coding!
这是一种更快更简单的方法；我找到了，希望它可以帮助某人！快乐编码！
