jquery - 在 wordpress 中使用 fancybox 加载内联内容

Question

我正在尝试在自定义 wordpress 页面模板中使用 Fancybox 加载内联内容。灯箱显示但显示以下错误而不是内联内容。

错误：“无法加载请求的内容。请稍后再试。”

这是我正在使用的 javascript：

$(document).ready(function($) {
    $('a[href="#contact"]').fancybox({
        helpers: {
            overlay: {
                opacity: 0.98,
                css: { 'background-color': '#fff' }
            }
        }
    });
});

这是我想使用 Fancybox 显示的 HTML。

<a href="#contact">Inline content over here.</a>

请注意，我正在尝试在自定义 wordpress 页面模板中完成此操作。任何帮助将不胜感激。

Answer 1

你必须改变你的 HTML ：

HTML：

 <a href="#contact">Inline content over here.</a>
 <div id="contact" style="display:none">Inline content over here</div>
    ​

示例：http: //jsfiddle.net/fU54x/839/

如果您想保持相同的 html，并且只显示<a>标签中的内容，则必须在此模式下更改 Lightbox 脚本：

相同的 HTML：

<a href="#contact">Inline content over here.</a>

JS：

$('a[href="#contact"]').click(function(){
    var $this = $(this);
  $.fancybox({
        helpers: {
            overlay: {
                opacity: 0.98,
                css: { 'background-color': '#fff' }
            }
        },
      content: $this.html()
    });
});

我也更新了示例：

点击这里：http: //jsfiddle.net/fU54x/840/

Answer 2

尝试使用Fancybox的content 参数。

$(document).ready(function($) {
    var inlineContent = $('#inlineContent').html();
    $('a[href="#contact"]').fancybox({
        content: inlineContent,
        helpers: {
            overlay: {
                opacity: 0.98,
                css: { 'background-color': '#fff' }
            }
        }
    });
});

标记：

<a href="#contact">Link</a>
<div id="inlineContent" style="display:none;">Inline content over here.</div>