javascript 如何使用fancybox对话框插件直接显示一个div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4216495/
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 use fancybox dialog plugin to display a div directly
提问by Brian Connolly
I have a javascript function called confirm() that that uses the JQuery UI library to open dialogs.
我有一个名为confirm() 的javascript 函数，它使用JQuery UI 库打开对话框。
For example:
例如：
jQuery('#confirm-popup').dialog('open');
This opens up and renders a div with id confirm-popup. I would like to switch to fancybox as it has an elastic effect that I need. So I was hoping that the following would work after I installed fancybox.
这将打开并呈现一个带有 id 的 div confirm-popup。我想切换到fancybox，因为它具有我需要的弹性效果。所以我希望在我安装了fancybox后以下内容会起作用。
jQuery('confirm-popup').fancybox();
This doesn't appear to work. As far as I can see you can only call the fancybox()function on an anchor tag. I don't want to use anchor tags, as this would involve a lot of code changes for me as I have already mapped my confirm function to these tags.
这似乎不起作用。据我所知，您只能fancybox()在锚标记上调用该函数。我不想使用锚标记，因为这会涉及到很多代码更改，因为我已经将确认功能映射到这些标记。
Ideally I would like to just grab the div element and show it in a similar way to the jQuery UI dialog method? Is there a way of doing this with Fancybox?
理想情况下，我只想获取 div 元素并以类似于 jQuery UI 对话框方法的方式显示它？有没有办法用 Fancybox 做到这一点？
回答by Griff
If you want to use FancyBox as a dialog, you can invoke it directly as such:
如果你想使用 FancyBox 作为对话框，你可以直接调用它：
$.fancybox({
'width' : '60%',
'height' : '65%',
'autoScale' : true,
'hideOnContentClick' : false,
'href' : someUrl,
'callbackOnShow' : function(){ ... },
'onClosed' : function(){...},
'type' : 'iframe'
});
回答by Jarrett Widman
You can use fancybox for a div, but my first question is whether you left out your # for the ID? It would be useful if you'd post the HTML and where your fancybox() is called too, as it should be in document.ready. And you will want to call .fancybox() on what opens the dialog instead of directly on the dialog.
您可以将fancybox 用于div，但我的第一个问题是您是否为ID 遗漏了#？如果您发布 HTML 以及您的 Fantasybox() 的调用位置，这将很有用，因为它应该在 document.ready 中。并且您将希望在打开对话框的内容上调用 .fancybox() 而不是直接在对话框上调用。
In case you missed it, this is the example from the fancybox site:
如果你错过了，这是来自fancybox站点的示例：
<script>
$(document).ready(function() {
$("#inline").fancybox();
});
</script>
<a id="inline" href="#data">This shows content of element who has id="data"</a>
<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
回答by Ronald
This demonstrates how to use fancybox (1.3.4) without requiring the <a href>link element by calling fancybox directly.
这演示了如何<a href>通过直接调用fancybox来使用fancybox (1.3.4) 而不需要link 元素。
Inline:
排队：
<div style="display:none;">
<div id="confirm-popup">
dialog content
</div>
</div>
$('#myform').submit(function() {
$.fancybox({
type: 'inline',
content: '#confirm-popup'
});
});
Iframe:
框架：
$('#myform').submit(function () {
$.fancybox({
type: 'iframe',
href: 'http://www.abc123.com'
});
});
