如何以编程方式触发带有内联div的fancybox？

当有人试图提交表单时，我想显示一个fancybox。所以我有这个：

$('#login-form').submit(function(e) { $.fancybox({ content: 'Hello Fancybox
', modal: true }); return false; });

工作得很好，但我宁愿使用我的div而不是尝试指定内容字符串中的所有HTML。我能用它弹出它吗？

  blah blah blah

代替？

对于FancyBox v3或更高版本，请参阅此答案

对于旧版本：

您需要在href属性中设置div ID。如果您在content属性中使用$('#access-policy').show() ，则第二次打开此fancybox时将不会显示任何内容。

 $('#login-form').submit(function(e) { $.fancybox({ href: '#access-policy', modal: true }); return false; });

HTML中也必须是：

   blah blah blah

🙂

你可以做：

 $('#login-form').submit(function(e) { $.fancybox({ content: $('#access-policy').show(), modal: true }); return false; });

没关系。 content可以是一个jquery对象：

 $('#login-form').submit(function(e) { $.fancybox({ content: $('#access-policy'), modal: true }); return false; });

但div必须包含在隐藏的div中，

  blah blah blah

否则什么都不会出现; 它不会更改显示属性。

内容是“任何HTML”，因此从Div获取HTML并将其提供给内容

 content: $('#access-policy').html(),

其他答案需要更新

因为我正在使用接受的答案的代码，并且抓了半个小时。

在最新的FancyBox 3中，他们更改了一些选项名称以及如何使用某些方法。

有关如何打开内联元素的旧版本：

 $.fancybox({ // OUTDATED href: '#element-id', modal: true });

需要转变为

 $.fancybox.open({ // FancyBox 3 src: '#element-id', modal: true });

注意open方法和href-> src的变化。

没有打开你会得到一个fancybox不是一个function错误。如果没有“src”，您将无法加载弹出的请求内容。

希望这可以帮助别人避免同样的错误，我们确实需要遵循这个文件。过时的情况要困难得多。

这演示了如何使用fancybox而不需要 link元素。

内联（1.3.4）：

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

内联（2.1.5）：

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

iframe ：

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