如何與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字幕塊中的表單輸入交互？

回答

相關問題