如何与 Fancybox3 字幕块中的表单输入进行交互?
How can I interact with form inputs in the Fancybox3 caption block?
我正在使用自定义模板为标题区域中的表单添加输入字段:
..fancybox({
caption: function (instance, item) {
return "FORM CONTAINING AN INPUT FIELD";
}
}
字段显示得很好,但我实际上无法单击任何表单元素。 Fancybox 只是窃取与图像交互的输入。有没有办法让 div.fancybox-caption-wrap 中的东西能够处理自己的输入并保持图像在上面?基本上,只是为了让它像 div.fancybox-controls 一样工作,它允许交互(并充当图像的顶部)。
我尝试在文档页面上搜索选项,但似乎没有合适或有效的选项。 "touch" 事件似乎可能会窃取事件,但 on/off 没有任何区别。禁用 "closeClickOutside" 也无济于事。无需任何额外步骤即可使用 Fancybox2 与表单元素进行交互。我还能尝试什么?
By default all Pointer events are disabled in caption area.
在 fancybox 标题框中启用输入文本或任何其他 html 字段
添加此 css 规则。
.fancybox-caption-wrap {
pointer-events: all;
}
我正在使用带 .fancybox-custom-layout
的 fancybox-3.1.20
这是我的工作代码。
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 图像评论面板的屏幕截图。
我正在使用自定义模板为标题区域中的表单添加输入字段:
..fancybox({
caption: function (instance, item) {
return "FORM CONTAINING AN INPUT FIELD";
}
}
字段显示得很好,但我实际上无法单击任何表单元素。 Fancybox 只是窃取与图像交互的输入。有没有办法让 div.fancybox-caption-wrap 中的东西能够处理自己的输入并保持图像在上面?基本上,只是为了让它像 div.fancybox-controls 一样工作,它允许交互(并充当图像的顶部)。
我尝试在文档页面上搜索选项,但似乎没有合适或有效的选项。 "touch" 事件似乎可能会窃取事件,但 on/off 没有任何区别。禁用 "closeClickOutside" 也无济于事。无需任何额外步骤即可使用 Fancybox2 与表单元素进行交互。我还能尝试什么?
By default all Pointer events are disabled in caption area.
在 fancybox 标题框中启用输入文本或任何其他 html 字段 添加此 css 规则。
.fancybox-caption-wrap {
pointer-events: all;
}
我正在使用带 .fancybox-custom-layout
的 fancybox-3.1.20这是我的工作代码。
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 图像评论面板的屏幕截图。