如何与Fancybox3标题栏中的表单输入进行交互？

Question

我使用自定义模板为标题区域中的表单添加输入字段：

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

字段显示效果很好，但我无法实际点击任何表单元素。 Fancybox只是窃取输入以与图像交互。有没有办法让div.fancybox-caption-wrap中的东西能够处理自己的输入并保持图像在它上面？基本上，只是让它像div.fancybox-controls一样工作，它允许交互（并充当图像的顶部）。

我尝试在文档页面上搜索选项，但似乎没有任何内容适合或工作。 ＆＃34; touch＆＃34;事件似乎可能会窃取事件，但开/关没有任何区别。禁用＆＃34; closeClickOutside＆＃34;也没有帮助。与表单元素交互使用Fancybox2而无需任何额外步骤。我还能尝试什么？

Answer 1

  

默认情况下，在标题区域中禁用所有指针事件。

在fancybox标题框中启用输入文本或任何其他html字段 添加此css规则。

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

我正在使用fancybox-3.1.20和.fancybox-custom-layout

这是我的工作代码。

            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图像评论面板的屏幕截图。