如何与Fancybox3字幕块中的表单输入交互？

我使用自定义模板添加输入字段标题区域中的一种形式：如何与Fancybox3字幕块中的表单输入交互？

..fancybox({ 
    caption: function (instance, item) { 
    return "FORM CONTAINING AN INPUT FIELD"; 
    } 
}

字段显示很好，但我不能实际点击任何形式的元素。 Fancybox只是窃取与图像交互的输入。有没有办法让div.fancybox-caption-wrap中的东西能够处理他们自己的输入并将图片保留在上面？基本上，只是为了使它像div.fancybox-控件一样工作，它允许交互性（并充当图像的顶部）。

我试着搜索文档页面上的选项，但没有任何东西似乎适合或工作。 “触摸”事件似乎可能会窃取事件，但开/关没有任何区别。禁用“closeClickOutside”也无济于事。与表单元素进行交互，与Fancybox2一起工作，无需任何额外的步骤。我还能尝试什么？

来源

2017-02-04 Arian Kulp

您是否找到了解决方案？我需要在图像标题中有一个按钮，并且它停止使用fancybox3。谢谢。 – Vero

这是很烦人的，似乎没有解决这个 –

我最终只需要改变战术。非常令人沮丧！ –

默认情况下，标题区域中的所有指针事件都处于禁用状态。

要启用输入文字或fancybox字幕框内的任何其他html字段请添加此css规则。

.fancybox-caption-wrap { 
    pointer-events: all; 
}

我使用的fancybox-3.1.20与.fancybox定制布局

这里是我工作的代码。

  caption: function (instance, item) { 
       var caption = $(this).data('caption') || ''; 

       if (item.type === 'image') { 
        caption = '(<span data-fancybox-index></span>/<span data-fancybox-count></span>)' + '<br />' + (caption.length ? caption + '<br />' : '') + 
        '<input type="text" value="comment">' + 
        $('#comments_panel').html() 
        ; 
       } 
       return caption; 
      }

结帐字幕区域内我的fancybox图片评论面板的屏幕截图。

来源

2017-09-01 05:17:45

对不起，我没有看到这更快拉吉夫！这个简单的CSS规则做到了这一点。太烦人了，我没有早点看到它。谢谢你的帮助！ –

如何与Fancybox3字幕块中的表单输入交互？

回答

相关问题