jQuery 如何使用内联div以编程方式触发fancybox？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5811415/
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
How to programmatically trigger fancybox with an inline div?
提问by mpen
I want to make a fancybox appear when someone tries to submit a form. So I've got this:
当有人尝试提交表单时，我想让一个fancybox出现。所以我有这个：
$('#login-form').submit(function(e) {
$.fancybox({
content: '<h2>Hello Fancybox</h2>',
modal: true
});
return false;
});
Works good, but I'd rather use my div than trying to specify all the HTML in the content string. Can I make it popup with this
效果很好，但我宁愿使用我的 div 而不是尝试在内容字符串中指定所有 HTML。我可以让它弹出这个吗
<div style="display:none" id="access-policy">
blah blah blah
</div>
Instead?
反而？
回答by Mar?al Juan
For FancyBox v3 or later see this answer
对于 FancyBox v3 或更高版本，请参阅此答案
For old versions:
对于旧版本：
You need to set in hrefproperty the div ID. If you use $('#access-policy').show()in contentproperty the second time you open this fancybox will show nothing.
您需要在href属性中设置 div ID。如果您$('#access-policy').show()在content第二次打开时使用in属性，此花式框将不显示任何内容。
$('#login-form').submit(function(e) {
$.fancybox({
href: '#access-policy',
modal: true
});
return false;
});
Also in the HTML has to be:
在 HTML 中还必须是：
<div style="display:none">
<div id="access-policy">
blah blah blah
</div>
</div>
:)
:)
回答by Michael Shang
The other answers need to be updated
其他答案需要更新
because I was using the accepted answer's code and was scratching my head for half an hour.
因为我正在使用接受的答案的代码并且挠了半个小时。
In the most recent FancyBox 3, they have changed some option names and how to use some methods.
在最新的 FancyBox 3 中，他们更改了一些选项名称以及如何使用一些方法。
The older version on how to open an inline element:
关于如何打开内联元素的旧版本：
$.fancybox({ // OUTDATED
href: '#element-id',
modal: true
});
needs to change to
需要更改为
$.fancybox.open({ // FancyBox 3
src: '#element-id',
modal: true
});
Notice the open method and the href->src change.
注意 open 方法和 href->src 的变化。
Without the open you will get a fancybox is not a function error. Without "src" you will get a requested content cannot be loaded popup.
不打开你会得到一个fancybox is not a function 错误。如果没有“src”，您将收到无法加载请求内容的弹出窗口。
Hope this help someone to avoid my same mistakes and we do need to FOLLOW THE DOCUMENTATION on this one. That's much harder to be outdated.
希望这能帮助别人避免我犯的同样的错误，我们确实需要遵循这个文档。过时要困难得多。
回答by Naftali aka Neal
you can do:
你可以做：
$('#login-form').submit(function(e) {
$.fancybox({
content: $('#access-policy').show(),
modal: true
});
return false;
});
回答by mpen
Nevermind. contentcan be a jquery object:
没关系。content可以是一个 jquery 对象：
$('#login-form').submit(function(e) {
$.fancybox({
content: $('#access-policy'),
modal: true
});
return false;
});
But the divhas to be wrapped in a hidden div,
但是div必须包裹在一个隐藏的div中，
<div style="display:none"><div id="access-policy">
blah blah blah
</div></div>
Otherwise nothing will appear; it doesn't change the display property.
否则什么都不会出现；它不会改变显示属性。
回答by amit_g
Content is "any HTML", so get the HTML from the Div and give it to content
内容是“任何 HTML”，因此从 Div 中获取 HTML 并将其提供给内容
content: $('#access-policy').html(),
回答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'
});
});
