使用 jquery 1.10.2,fancybox 2.1.5
我试图通过 javascript 向 fancybox 传递“内容:数据”,但它不起作用。然而,如果我 console.log 数据变量,它会显示有效的 HTML/文本,但 fancybox 拒绝使用它。
<div class="item">
<h4 class="choice">launch modal</h4>
<div class="detail">
This should show up in my <b>fancybox</b>!
</div><!--.detail-->
</div><!--.item-->
$('.choice').each(function(i, elem){
$(elem).siblings('.detail').wrap('<div style="display:none"></div>');
});
$(".choice").fancybox({
maxWidth: 800,
content: 'replace this text',
beforeShow: function(){
var title = $(this.element).text();
var data = $(this.element).parent().find('.detail').html();
console.log('this=' + this + ' | title=' + title + ' | data=' + data);//DEBUG
this.content = data;
}
});
console log明明是拿到了data html内容,但是fancybox拒绝使用。我已经将它包装在另一个带有 display:none 的 div 中,因为他们的网站说无论出于何种原因都要这样做。
最佳答案
要在回调中构建您的内容,请改用 afterLoad
,否则 content
选项将优先于 this.content
回调:
$(".choice").fancybox({
maxWidth: 800,
content: 'replace this text',
afterLoad: function () {
var title = $(this.element).text();
var data = $(this.element).parent().find('.detail').html();
console.log('this=' + this + ' | title=' + title + ' | data=' + data); //DEBUG
this.content = data;
}
});
参见 JSFIDDLE
注意:您还可以构建/替换上面代码中的title
,例如this.title = title;
关于javascript - Fancybox 不会使用通过 javascript 传递的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20688377/